Performance/Webpack: Introduces more aggressive code-splitting and ot…

…her perf improvements (grafana#18544) * Performance/Webpack: Introduces more aggressive code-splitting and other perf improvements - Introduces dynamic imports for built-in plugins - Uses dynamic imports for various packages (rst2html, brace) - Introduces route-based dynamic imports - Splits angular and moment into separate bundles
AmyBlankenship · Sep 3, 2019 · 7985aa1 · 7985aa1
1 parent 409874b
commit 7985aa1
Show file tree

Hide file tree

Showing 34 changed files with 289 additions and 200 deletions.
diff --git a/.babelrc b/.babelrc
@@ -3,8 +3,11 @@
     [
       "@babel/preset-env",
       {
-		  "targets": { "browsers": "last 3 versions" },
-		  "useBuiltIns": "entry"
+        "targets": {
+          "browsers": "last 3 versions"
+        },
+        "useBuiltIns": "entry",
+        "modules": "false",
       }
     ]
   ]

diff --git a/.gitignore b/.gitignore
@@ -94,3 +94,6 @@ theOutput/
 
 # Ignore go local build dependencies
 /scripts/go/bin/**
+
+# Ignore compilation stats from `yarn stats`
+compilation-stats.json
diff --git a/package.json b/package.json
@@ -147,6 +147,7 @@
     "start:hot": "grafana-toolkit core:start --hot --watchTheme",
     "start:ignoreTheme": "grafana-toolkit core:start --hot",
     "start:noTsCheck": "grafana-toolkit core:start --noTsCheck",
+    "stats": "webpack --mode production --config scripts/webpack/webpack.prod.js --profile --json > compilation-stats.json",
     "watch": "yarn start -d watch,start core:start --watchTheme ",
     "build": "grunt build",
     "test": "grunt test",

diff --git a/packages/grafana-data/src/utils/fieldReducer.test.ts b/packages/grafana-data/src/utils/fieldReducer.test.ts
@@ -1,6 +1,7 @@
+import difference from 'lodash/difference';
+
 import { fieldReducers, ReducerID, reduceField } from './fieldReducer';
 
-import _ from 'lodash';
 import { Field, FieldType } from '../types/index';
 import { MutableDataFrame } from './dataFrameHelper';
 import { ArrayVector } from './vector';
@@ -42,7 +43,7 @@ describe('Stats Calculators', () => {
     expect(stats.length).toBe(2);
 
     const found = stats.map(v => v.id);
-    const notFound = _.difference(names, found);
+    const notFound = difference(names, found);
     expect(notFound.length).toBe(2);
 
     expect(notFound[0]).toBe('not a stat');

diff --git a/packages/grafana-data/src/utils/rangeutil.ts b/packages/grafana-data/src/utils/rangeutil.ts
@@ -1,5 +1,5 @@
-// @ts-ignore
-import _ from 'lodash';
+import each from 'lodash/each';
+import groupBy from 'lodash/groupBy';
 
 import { RawTimeRange } from '../types/time';
 
@@ -64,12 +64,12 @@ const rangeOptions = [
 const absoluteFormat = 'YYYY-MM-DD HH:mm:ss';
 
 const rangeIndex: any = {};
-_.each(rangeOptions, (frame: any) => {
+each(rangeOptions, (frame: any) => {
   rangeIndex[frame.from + ' to ' + frame.to] = frame;
 });
 
 export function getRelativeTimesList(timepickerSettings: any, currentDisplay: any) {
-  const groups = _.groupBy(rangeOptions, (option: any) => {
+  const groups = groupBy(rangeOptions, (option: any) => {
     option.active = option.display === currentDisplay;
     return option.section;
   });

diff --git a/packages/grafana-toolkit/src/config/webpack.plugin.config.ts b/packages/grafana-toolkit/src/config/webpack.plugin.config.ts
@@ -183,7 +183,7 @@ export const getWebpackConfig: WebpackConfigurationGetter = options => {
             {
               loader: 'babel-loader',
               options: {
-                presets: ['@babel/preset-env'],
+                presets: ['@babel/preset-env', { modules: false }],
                 plugins: ['angularjs-annotate'],
               },
             },

diff --git a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import _ from 'lodash';
+
 import React from 'react';
 import { css } from 'emotion';
 import { GraphSeriesValue, AbsoluteTimeRange } from '@grafana/data';

diff --git a/public/app/core/components/Footer/Footer.tsx b/public/app/core/components/Footer/Footer.tsx
@@ -16,22 +16,22 @@ export const Footer: FC<Props> = React.memo(
         <div className="text-center">
           <ul>
             <li>
-              <a href="http://docs.grafana.org" target="_blank">
+              <a href="http://docs.grafana.org" target="_blank" rel="noopener">
                 <i className="fa fa-file-code-o" /> Docs
               </a>
             </li>
             <li>
-              <a href="https://grafana.com/services/support" target="_blank">
+              <a href="https://grafana.com/services/support" target="_blank" rel="noopener">
                 <i className="fa fa-support" /> Support Plans
               </a>
             </li>
             <li>
-              <a href="https://community.grafana.com/" target="_blank">
+              <a href="https://community.grafana.com/" target="_blank" rel="noopener">
                 <i className="fa fa-comments-o" /> Community
               </a>
             </li>
             <li>
-              <a href="https://grafana.com" target="_blank">
+              <a href="https://grafana.com" target="_blank" rel="noopener">
                 {appName}
               </a>{' '}
               <span>
@@ -41,7 +41,7 @@ export const Footer: FC<Props> = React.memo(
             {newGrafanaVersionExists && (
               <li>
                 <Tooltip placement="auto" content={newGrafanaVersion}>
-                  <a href="https://grafana.com/get" target="_blank">
+                  <a href="https://grafana.com/get" target="_blank" rel="noopener">
                     New version available!
                   </a>
                 </Tooltip>

diff --git a/public/app/core/components/code_editor/brace.d.ts b/public/app/core/components/code_editor/brace.d.ts
@@ -0,0 +1,4 @@
+declare module 'brace/*' {
+  let brace: any;
+  export default brace;
+}
diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts
@@ -30,20 +30,6 @@
 
 import coreModule from 'app/core/core_module';
 import config from 'app/core/config';
-import ace from 'brace';
-import './theme-grafana-dark';
-import 'brace/ext/language_tools';
-import 'brace/theme/textmate';
-import 'brace/mode/text';
-import 'brace/snippets/text';
-import 'brace/mode/sql';
-import 'brace/snippets/sql';
-import 'brace/mode/sqlserver';
-import 'brace/snippets/sqlserver';
-import 'brace/mode/markdown';
-import 'brace/snippets/markdown';
-import 'brace/mode/json';
-import 'brace/snippets/json';
 
 const DEFAULT_THEME_DARK = 'ace/theme/grafana-dark';
 const DEFAULT_THEME_LIGHT = 'ace/theme/textmate';
@@ -55,7 +41,7 @@ const DEFAULT_SNIPPETS = true;
 
 const editorTemplate = `<div></div>`;
 
-function link(scope: any, elem: any, attrs: any) {
+async function link(scope: any, elem: any, attrs: any) {
   // Options
   const langMode = attrs.mode || DEFAULT_MODE;
   const maxLines = attrs.maxLines || DEFAULT_MAX_LINES;
@@ -66,6 +52,23 @@ function link(scope: any, elem: any, attrs: any) {
 
   // Initialize editor
   const aceElem = elem.get(0);
+  const { default: ace } = await import(/* webpackChunkName: "brace" */ 'brace');
+  await import('brace/ext/language_tools');
+  await import('brace/theme/textmate');
+  await import('brace/mode/text');
+  await import('brace/snippets/text');
+  await import('brace/mode/sql');
+  await import('brace/snippets/sql');
+  await import('brace/mode/sqlserver');
+  await import('brace/snippets/sqlserver');
+  await import('brace/mode/markdown');
+  await import('brace/snippets/markdown');
+  await import('brace/mode/json');
+  await import('brace/snippets/json');
+
+  // @ts-ignore
+  await import('./theme-grafana-dark');
+
   const codeEditor = ace.edit(aceElem);
   const editorSession = codeEditor.getSession();
 

diff --git a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
@@ -160,6 +160,7 @@ exports[`ServerStats Should render table with stats 1`] = `
               <li>
                 <a
                   href="http://docs.grafana.org"
+                  rel="noopener"
                   target="_blank"
                 >
                   <i
@@ -171,6 +172,7 @@ exports[`ServerStats Should render table with stats 1`] = `
               <li>
                 <a
                   href="https://grafana.com/services/support"
+                  rel="noopener"
                   target="_blank"
                 >
                   <i
@@ -182,6 +184,7 @@ exports[`ServerStats Should render table with stats 1`] = `
               <li>
                 <a
                   href="https://community.grafana.com/"
+                  rel="noopener"
                   target="_blank"
                 >
                   <i
@@ -193,6 +196,7 @@ exports[`ServerStats Should render table with stats 1`] = `
               <li>
                 <a
                   href="https://grafana.com"
+                  rel="noopener"
                   target="_blank"
                 >
                   Grafana

diff --git a/public/app/features/datasources/NewDataSourcePage.tsx b/public/app/features/datasources/NewDataSourcePage.tsx
@@ -131,6 +131,7 @@ class NewDataSourcePage extends PureComponent<Props> {
             className="btn btn-inverse"
             href="https://grafana.com/plugins?type=datasource&utm_source=new-data-source"
             target="_blank"
+            rel="noopener"
           >
             Find more data source plugins on grafana.com
           </a>
@@ -198,6 +199,7 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
             className="btn btn-inverse"
             href={`${learnMoreLink}?utm_source=grafana_add_ds`}
             target="_blank"
+            rel="noopener"
             onClick={onLearnMoreClick}
           >
             Learn more <i className="fa fa-external-link add-datasource-item-actions__btn-icon" />

diff --git a/public/app/features/explore/NoDataSourceCallToAction.tsx b/public/app/features/explore/NoDataSourceCallToAction.tsx
@@ -14,6 +14,7 @@ export const NoDataSourceCallToAction = () => {
       <a
         href="http://docs.grafana.org/administration/provisioning/#datasources?utm_source=explore"
         target="_blank"
+        rel="noopener"
         className="text-link"
       >
         Learn more

diff --git a/public/app/features/explore/QueryRow.tsx b/public/app/features/explore/QueryRow.tsx
@@ -1,6 +1,7 @@
 // Libraries
 import React, { PureComponent } from 'react';
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
+import has from 'lodash/has';
 import { hot } from 'react-hot-loader';
 // @ts-ignore
 import { connect } from 'react-redux';
@@ -97,7 +98,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
     this.setState({ textEditModeEnabled: !this.state.textEditModeEnabled });
   };
 
-  updateLogsHighlights = _.debounce((value: DataQuery) => {
+  updateLogsHighlights = debounce((value: DataQuery) => {
     const { datasourceInstance } = this.props;
     if (datasourceInstance.getHighlighterExpression) {
       const { exploreId } = this.props;
@@ -120,7 +121,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
       mode,
     } = this.props;
     const canToggleEditorModes =
-      mode === ExploreMode.Metrics && _.has(datasourceInstance, 'components.QueryCtrl.prototype.toggleEditorMode');
+      mode === ExploreMode.Metrics && has(datasourceInstance, 'components.QueryCtrl.prototype.toggleEditorMode');
     const queryErrors = queryResponse.error && queryResponse.error.refId === query.refId ? [queryResponse.error] : [];
     let QueryField;
 

diff --git a/public/app/features/plugins/PluginPage.tsx b/public/app/features/plugins/PluginPage.tsx
@@ -278,7 +278,7 @@ class PluginPage extends PureComponent<Props, State> {
           {info.links.map(link => {
             return (
               <li key={link.url}>
-                <a href={link.url} className="external-link" target="_blank">
+                <a href={link.url} className="external-link" target="_blank" rel="noopener">
                   {link.name}
                 </a>
               </li>

diff --git a/public/app/features/plugins/built_in_plugins.ts b/public/app/features/plugins/built_in_plugins.ts
@@ -1,20 +1,36 @@
-import * as graphitePlugin from 'app/plugins/datasource/graphite/module';
-import * as cloudwatchPlugin from 'app/plugins/datasource/cloudwatch/module';
-import * as dashboardDSPlugin from 'app/plugins/datasource/dashboard/module';
-import * as elasticsearchPlugin from 'app/plugins/datasource/elasticsearch/module';
-import * as opentsdbPlugin from 'app/plugins/datasource/opentsdb/module';
-import * as grafanaPlugin from 'app/plugins/datasource/grafana/module';
-import * as influxdbPlugin from 'app/plugins/datasource/influxdb/module';
-import * as lokiPlugin from 'app/plugins/datasource/loki/module';
-import * as mixedPlugin from 'app/plugins/datasource/mixed/module';
-import * as mysqlPlugin from 'app/plugins/datasource/mysql/module';
-import * as postgresPlugin from 'app/plugins/datasource/postgres/module';
-import * as prometheusPlugin from 'app/plugins/datasource/prometheus/module';
-import * as mssqlPlugin from 'app/plugins/datasource/mssql/module';
-import * as testDataDSPlugin from 'app/plugins/datasource/testdata/module';
-import * as inputDatasourcePlugin from 'app/plugins/datasource/input/module';
-import * as stackdriverPlugin from 'app/plugins/datasource/stackdriver/module';
-import * as azureMonitorPlugin from 'app/plugins/datasource/grafana-azure-monitor-datasource/module';
+const graphitePlugin = async () =>
+  await import(/* webpackChunkName: "graphitePlugin" */ 'app/plugins/datasource/graphite/module');
+const cloudwatchPlugin = async () =>
+  await import(/* webpackChunkName: "cloudwatchPlugin" */ 'app/plugins/datasource/cloudwatch/module');
+const dashboardDSPlugin = async () =>
+  await import(/* webpackChunkName "dashboardDSPlugin" */ 'app/plugins/datasource/dashboard/module');
+const elasticsearchPlugin = async () =>
+  await import(/* webpackChunkName: "elasticsearchPlugin" */ 'app/plugins/datasource/elasticsearch/module');
+const opentsdbPlugin = async () =>
+  await import(/* webpackChunkName: "opentsdbPlugin" */ 'app/plugins/datasource/opentsdb/module');
+const grafanaPlugin = async () =>
+  await import(/* webpackChunkName: "grafanaPlugin" */ 'app/plugins/datasource/grafana/module');
+const influxdbPlugin = async () =>
+  await import(/* webpackChunkName: "influxdbPlugin" */ 'app/plugins/datasource/influxdb/module');
+const lokiPlugin = async () => await import(/* webpackChunkName: "lokiPlugin" */ 'app/plugins/datasource/loki/module');
+const mixedPlugin = async () =>
+  await import(/* webpackChunkName: "mixedPlugin" */ 'app/plugins/datasource/mixed/module');
+const mysqlPlugin = async () =>
+  await import(/* webpackChunkName: "mysqlPlugin" */ 'app/plugins/datasource/mysql/module');
+const postgresPlugin = async () =>
+  await import(/* webpackChunkName: "postgresPlugin" */ 'app/plugins/datasource/postgres/module');
+const prometheusPlugin = async () =>
+  await import(/* webpackChunkName: "prometheusPlugin" */ 'app/plugins/datasource/prometheus/module');
+const mssqlPlugin = async () =>
+  await import(/* webpackChunkName: "mssqlPlugin" */ 'app/plugins/datasource/mssql/module');
+const testDataDSPlugin = async () =>
+  await import(/* webpackChunkName: "testDataDSPlugin" */ 'app/plugins/datasource/testdata/module');
+const inputDatasourcePlugin = async () =>
+  await import(/* webpackChunkName: "inputDatasourcePlugin" */ 'app/plugins/datasource/input/module');
+const stackdriverPlugin = async () =>
+  await import(/* webpackChunkName: "stackdriverPlugin" */ 'app/plugins/datasource/stackdriver/module');
+const azureMonitorPlugin = async () =>
+  await import(/* webpackChunkName: "azureMonitorPlugin" */ 'app/plugins/datasource/grafana-azure-monitor-datasource/module');
 
 import * as textPanel from 'app/plugins/panel/text/module';
 import * as text2Panel from 'app/plugins/panel/text2/module';
@@ -35,7 +51,7 @@ import * as pieChartPanel from 'app/plugins/panel/piechart/module';
 import * as barGaugePanel from 'app/plugins/panel/bargauge/module';
 import * as logsPanel from 'app/plugins/panel/logs/module';
 
-import * as exampleApp from 'app/plugins/app/example-app/module';
+const exampleApp = async () => await import(/* webpackChunkName: "exampleApp" */ 'app/plugins/app/example-app/module');
 
 const builtInPlugins: any = {
   'app/plugins/datasource/graphite/module': graphitePlugin,

diff --git a/public/app/features/plugins/plugin_loader.ts b/public/app/features/plugins/plugin_loader.ts
@@ -162,10 +162,15 @@ for (const flotDep of flotDeps) {
   exposeToPlugin(flotDep, { fakeDep: 1 });
 }
 
-export function importPluginModule(path: string): Promise<any> {
+export async function importPluginModule(path: string): Promise<any> {
   const builtIn = builtInPlugins[path];
   if (builtIn) {
-    return Promise.resolve(builtIn);
+    // for handling dynamic imports
+    if (typeof builtIn === 'function') {
+      return await builtIn();
+    } else {
+      return Promise.resolve(builtIn);
+    }
   }
   return grafanaRuntime.SystemJS.import(path);
 }

diff --git a/public/app/features/users/UsersActionBar.tsx b/public/app/features/users/UsersActionBar.tsx
@@ -68,7 +68,7 @@ export class UsersActionBar extends PureComponent<Props> {
             </a>
           )}
           {externalUserMngLinkUrl && (
-            <a className="btn btn-primary" href={externalUserMngLinkUrl} target="_blank">
+            <a className="btn btn-primary" href={externalUserMngLinkUrl} target="_blank" rel="noopener">
               <i className="fa fa-external-link-square" /> {externalUserMngLinkName}
             </a>
           )}

diff --git a/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap b/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap
@@ -86,6 +86,7 @@ exports[`Render should show external user management button 1`] = `
     <a
       className="btn btn-primary"
       href="some/url"
+      rel="noopener"
       target="_blank"
     >
       <i