build: optimize webpack code split (#10831)

superset-frontend/webpack.config.js

@@ -43,6 +43,8 @@ const {
   devserverPort = 9000,
   measure = false,
   analyzeBundle = false,
+  analyzerPort = 8888,
+  nameChunks = false,
 } = parsedArgs;
 const isDevMode = mode !== 'production';
 
@@ -197,13 +199,61 @@ const config = {
     sideEffects: true,
     splitChunks: {
       chunks: 'all',
+      name: nameChunks,
       automaticNameDelimiter: '-',
       minChunks: 2,
       cacheGroups: {
-        default: false,
+        automaticNamePrefix: 'chunk',
-        major: {
+        // basic stable dependencies
-          name: 'vendors-major',
+        vendors: {
-          test: /\/node_modules\/(brace|react|react-dom|@superset-ui\/translation|webpack.*|@babel.*)\//,
+          priority: 50,
+          name: 'vendors',
+          test: new RegExp(
+            `/node_modules/(${[
+              'abortcontroller-polyfill',
+              'react',
+              'react-dom',
+              'prop-types',
+              'redux',
+              'react-redux',
+              'react-hot-loader',
+              'react-select',
+              'react-sortable-hoc',
+              'react-virtualized',
+              'react-table',
+              '@hot-loader.*',
+              'webpack.*',
+              '@?babel.*',
+              'lodash.*',
+              'antd',
+              '@ant-design.*',
+              '.*bootstrap',
+              'moment',
+              'jquery',
+              'core-js.*',
+              '@emotion.*',
+              'd3.*',
+            ].join('|')})/`,
+          ),
+        },
+        // bundle large libraries separately
+        brace: {
+          name: 'brace',
+          test: /\/node_modules\/(brace|react-ace)\//,
+          priority: 40,
+        },
+        mathjs: {
+          name: 'mathjs',
+          test: /\/node_modules\/mathjs\//,
+          priority: 30,
+          enforce: true,
+        },
+        // viz thumbnails are used in `addSlice` and `explore` page
+        thumbnail: {
+          name: 'thumbnail',
+          test: /thumbnail(Large)?\.png/i,
+          priority: 20,
+          enforce: true,
         },
       },
     },
@@ -299,7 +349,7 @@ const config = {
           },
         ],
       },
-      /* for css linking images */
+      /* for css linking images (and viz plugin thumbnails) */
       {
         test: /\.png$/,
         loader: 'url-loader',
@@ -404,7 +454,7 @@ if (isDevMode) {
 // Pass flag --analyzeBundle=true to enable
 // e.g. npm run build -- --analyzeBundle=true
 if (analyzeBundle) {
-  config.plugins.push(new BundleAnalyzerPlugin());
+  config.plugins.push(new BundleAnalyzerPlugin({ analyzerPort }));
 }
 
 // Speed measurement is disabled by default