From 20e619e445f5268dee10ab9230071daf5fa55e59 Mon Sep 17 00:00:00 2001 From: Jack Westbrook Date: Thu, 5 Dec 2024 12:59:43 +0100 Subject: [PATCH] Tempo: Reduce initial bundle size (#97084) * feat(grafana-plugin-configs): externalise rxjs/operators * feat(plugin-configs): add bundle analyser behind stats env var * chore(tempo): add a build:stats script for bundle analysis * feat(tempo): make query and config editors default export * feat(tempo): lazy load query and config editors * feat(tempo): lazy cheat sheet * chore(tempo): remove webpackchunkname hints --- packages/grafana-plugin-configs/package.json | 4 +- .../grafana-plugin-configs/webpack.config.ts | 7 +++ .../plugins/datasource/tempo/QueryField.tsx | 4 +- .../tempo/configuration/ConfigEditor.tsx | 6 ++- public/app/plugins/datasource/tempo/module.ts | 17 ------- .../app/plugins/datasource/tempo/module.tsx | 47 +++++++++++++++++++ .../app/plugins/datasource/tempo/package.json | 1 + yarn.lock | 15 +++++- 8 files changed, 79 insertions(+), 22 deletions(-) delete mode 100644 public/app/plugins/datasource/tempo/module.ts create mode 100644 public/app/plugins/datasource/tempo/module.tsx diff --git a/packages/grafana-plugin-configs/package.json b/packages/grafana-plugin-configs/package.json index 4eaea8b5ca8..a292b4c8088 100644 --- a/packages/grafana-plugin-configs/package.json +++ b/packages/grafana-plugin-configs/package.json @@ -10,6 +10,7 @@ "@grafana/tsconfig": "^2.0.0", "@swc/core": "1.9.3", "@types/eslint": "9.6.1", + "@types/webpack-bundle-analyzer": "^4.7.0", "copy-webpack-plugin": "12.0.2", "eslint": "9.14.0", "eslint-webpack-plugin": "4.2.0", @@ -18,7 +19,8 @@ "replace-in-file-webpack-plugin": "1.0.6", "swc-loader": "0.2.6", "typescript": "5.5.4", - "webpack": "5.95.0" + "webpack": "5.95.0", + "webpack-bundle-analyzer": "^4.10.2" }, "packageManager": "yarn@4.5.3" } diff --git a/packages/grafana-plugin-configs/webpack.config.ts b/packages/grafana-plugin-configs/webpack.config.ts index 14432d95939..4fd39f206cd 100644 --- a/packages/grafana-plugin-configs/webpack.config.ts +++ b/packages/grafana-plugin-configs/webpack.config.ts @@ -5,6 +5,7 @@ import path from 'path'; // @ts-expect-error - there are no types for this package import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin'; import { Configuration } from 'webpack'; +import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import { DIST_DIR } from './constants'; import { getPackageJson, getPluginJson, getEntries, hasLicense } from './utils'; @@ -62,6 +63,7 @@ const config = async (env: Record): Promise => { 'react-redux', 'redux', 'rxjs', + 'rxjs/operators', 'react-router', 'd3', 'angular', @@ -230,6 +232,11 @@ const config = async (env: Record): Promise => { }, }; + if (env.stats) { + baseConfig.stats = 'normal'; + baseConfig.plugins?.push(new BundleAnalyzerPlugin()); + } + return baseConfig; }; diff --git a/public/app/plugins/datasource/tempo/QueryField.tsx b/public/app/plugins/datasource/tempo/QueryField.tsx index a2b89b415bb..acc7ae85f8e 100644 --- a/public/app/plugins/datasource/tempo/QueryField.tsx +++ b/public/app/plugins/datasource/tempo/QueryField.tsx @@ -178,4 +178,6 @@ class TempoQueryFieldComponent extends PureComponent { } } -export const TempoQueryField = withTheme2(TempoQueryFieldComponent); +const TempoQueryField = withTheme2(TempoQueryFieldComponent); + +export default TempoQueryField; diff --git a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx index 35e05ae4794..6b128eb0dcc 100644 --- a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx +++ b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx @@ -26,9 +26,9 @@ import { ServiceGraphSettings } from './ServiceGraphSettings'; import { StreamingSection } from './StreamingSection'; import { TraceQLSearchSettings } from './TraceQLSearchSettings'; -export type Props = DataSourcePluginOptionsEditorProps; +export type ConfigEditorProps = DataSourcePluginOptionsEditorProps; -export const ConfigEditor = ({ options, onOptionsChange }: Props) => { +const ConfigEditor = ({ options, onOptionsChange }: ConfigEditorProps) => { const styles = useStyles2(getStyles); return ( @@ -130,3 +130,5 @@ const getStyles = (theme: GrafanaTheme2) => ({ maxWidth: '900px', }), }); + +export default ConfigEditor; diff --git a/public/app/plugins/datasource/tempo/module.ts b/public/app/plugins/datasource/tempo/module.ts deleted file mode 100644 index 5a298df7d94..00000000000 --- a/public/app/plugins/datasource/tempo/module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { DataSourcePlugin, DashboardLoadedEvent } from '@grafana/data'; -import { getAppEvents } from '@grafana/runtime'; - -import CheatSheet from './CheatSheet'; -import { TempoQueryField } from './QueryField'; -import { ConfigEditor } from './configuration/ConfigEditor'; -import { TempoDatasource } from './datasource'; -import { onDashboardLoadedHandler } from './tracking'; -import { TempoQuery } from './types'; - -export const plugin = new DataSourcePlugin(TempoDatasource) - .setQueryEditor(TempoQueryField) - .setConfigEditor(ConfigEditor) - .setQueryEditorHelp(CheatSheet); - -// Subscribe to on dashboard loaded event so that we can track plugin adoption -getAppEvents().subscribe>(DashboardLoadedEvent, onDashboardLoadedHandler); diff --git a/public/app/plugins/datasource/tempo/module.tsx b/public/app/plugins/datasource/tempo/module.tsx new file mode 100644 index 00000000000..fb413b38b92 --- /dev/null +++ b/public/app/plugins/datasource/tempo/module.tsx @@ -0,0 +1,47 @@ +import { lazy, Suspense } from 'react'; + +import { DataSourcePlugin, DashboardLoadedEvent, type QueryEditorProps } from '@grafana/data'; +import { getAppEvents } from '@grafana/runtime'; +import { LoadingPlaceholder } from '@grafana/ui'; + +import type { ConfigEditorProps } from './configuration/ConfigEditor'; +import { TempoDatasource } from './datasource'; +import { onDashboardLoadedHandler } from './tracking'; +import type { TempoQuery } from './types'; + +// Lazy load the QueryField and ConfigEditor components to reduce the size of the initial bundle +const TempoQueryFieldLazy = lazy(() => import('./QueryField')); +const ConfigEditorLazy = lazy(() => import('./configuration/ConfigEditor')); +const CheatSheetLazy = lazy(() => import('./CheatSheet')); + +function TempoQueryField(props: QueryEditorProps) { + return ( + }> + + + ); +} + +function ConfigEditor(props: ConfigEditorProps) { + return ( + }> + + + ); +} + +function CheatSheet() { + return ( + + + + ); +} + +export const plugin = new DataSourcePlugin(TempoDatasource) + .setQueryEditor(TempoQueryField) + .setConfigEditor(ConfigEditor) + .setQueryEditorHelp(CheatSheet); + +// Subscribe to on dashboard loaded event so that we can track plugin adoption +getAppEvents().subscribe>(DashboardLoadedEvent, onDashboardLoadedHandler); diff --git a/public/app/plugins/datasource/tempo/package.json b/public/app/plugins/datasource/tempo/package.json index b04ab119b9a..232efab2eb2 100644 --- a/public/app/plugins/datasource/tempo/package.json +++ b/public/app/plugins/datasource/tempo/package.json @@ -63,6 +63,7 @@ }, "scripts": { "build": "webpack -c ./webpack.config.ts --env production", + "build:stats": "yarn build --env stats --profile --json=compilation-stats.json", "build:commit": "webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)", "dev": "webpack -w -c ./webpack.config.ts --env development" }, diff --git a/yarn.lock b/yarn.lock index 3d949ee525c..6f19bcb61dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3563,6 +3563,7 @@ __metadata: "@grafana/tsconfig": "npm:^2.0.0" "@swc/core": "npm:1.9.3" "@types/eslint": "npm:9.6.1" + "@types/webpack-bundle-analyzer": "npm:^4.7.0" copy-webpack-plugin: "npm:12.0.2" eslint: "npm:9.14.0" eslint-webpack-plugin: "npm:4.2.0" @@ -3573,6 +3574,7 @@ __metadata: tslib: "npm:2.7.0" typescript: "npm:5.5.4" webpack: "npm:5.95.0" + webpack-bundle-analyzer: "npm:^4.10.2" languageName: unknown linkType: soft @@ -9840,6 +9842,17 @@ __metadata: languageName: node linkType: hard +"@types/webpack-bundle-analyzer@npm:^4.7.0": + version: 4.7.0 + resolution: "@types/webpack-bundle-analyzer@npm:4.7.0" + dependencies: + "@types/node": "npm:*" + tapable: "npm:^2.2.0" + webpack: "npm:^5" + checksum: 10/2d9a2d4e26b1239623df97caceddd37a14c258623bccf27aca9da65b963cad33fdbfdc3a4770a58dbd2f9e6f591f62990616938aa52edf58aae3f6166c0045c1 + languageName: node + linkType: hard + "@types/webpack-env@npm:^1.18.4": version: 1.18.5 resolution: "@types/webpack-env@npm:1.18.5" @@ -29940,7 +29953,7 @@ __metadata: languageName: node linkType: hard -"webpack-bundle-analyzer@npm:4.10.2": +"webpack-bundle-analyzer@npm:4.10.2, webpack-bundle-analyzer@npm:^4.10.2": version: 4.10.2 resolution: "webpack-bundle-analyzer@npm:4.10.2" dependencies: