Update webpack bundle configuration (#5983)

* add configuration for optimizing webpack

* resolve webpack cli issue

* Update outdated packages

* extract brace as its own chunk

* update comments

* add list of libs to skip parsing

* remove some libs from list

* remove noParse

superset/assets/package.json

@@ -144,7 +144,7 @@
     "babel-preset-env": "^1.7.0",
     "chai": "^4.0.2",
     "clean-webpack-plugin": "^0.1.19",
-    "css-loader": "^0.28.0",
+    "css-loader": "^1.0.0",
     "cypress": "^3.0.3",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
@@ -164,7 +164,6 @@
     "imports-loader": "^0.7.1",
     "istanbul": "^1.0.0-alpha",
     "jsdom": "9.12.0",
-    "json-loader": "^0.5.4",
     "less": "^2.6.1",
     "less-loader": "^4.1.0",
     "mini-css-extract-plugin": "^0.4.0",
@@ -178,13 +177,15 @@
     "react-test-renderer": "^15.6.2",
     "redux-mock-store": "^1.2.3",
     "sinon": "^4.5.0",
+    "speed-measure-webpack-plugin": "^1.2.3",
     "style-loader": "^0.21.0",
+    "terser-webpack-plugin": "^1.1.0",
     "transform-loader": "^0.2.3",
-    "uglifyjs-webpack-plugin": "^1.1.0",
     "url-loader": "^1.0.1",
-    "webpack": "^4.18.0",
+    "webpack": "^4.19.0",
     "webpack-assets-manifest": "^3.0.1",
-    "webpack-cli": "^2.0.10",
+    "webpack-bundle-analyzer": "^3.0.2",
+    "webpack-cli": "^3.1.1",
     "webpack-dev-server": "^3.1.7",
     "webpack-sources": "^1.1.0"
   }

superset/assets/webpack.config.js

@@ -1,8 +1,11 @@
 const path = require('path');
 const webpack = require('webpack');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const WebpackAssetsManifest = require('webpack-assets-manifest');
 
 // Parse command-line arguments
@@ -17,6 +20,8 @@ const {
   mode = 'development',
   devserverPort = 9000,
   supersetPort = 8088,
+  measure = false,
+  analyzeBundle = false,
 } = parsedArgs;
 
 const isDevMode = mode !== 'production';
@@ -86,13 +91,21 @@ const config = {
     splitChunks: {
       chunks: 'all',
       automaticNameDelimiter: '-',
+      minChunks: 2,
+      cacheGroups: {
+        default: false,
+        major: {
+          name: 'vendors-major',
+          test: /[\\/]node_modules\/(brace|react[-]dom|core[-]js)[\\/]/,
+        },
+      },
     },
   },
   resolve: {
     extensions: ['.js', '.jsx'],
   },
   module: {
-    // uglyfying mapbox-gl results in undefined errors, see
+    // Uglifying mapbox-gl results in undefined errors, see
     // https://github.com/mapbox/mapbox-gl-js/issues/4359#issuecomment-288001933
     noParse: /(mapbox-gl)\.js$/,
     rules: [
@@ -172,4 +185,28 @@ const config = {
   },
 };
 
-module.exports = config;
+if (!isDevMode) {
+  config.optimization.minimizer = [
+    new TerserPlugin({
+      cache: true,
+      parallel: true,
+      extractComments: true,
+    }),
+  ];
+}
+
+// Bundle analyzer is disabled by default
+// Pass flag --analyzeBundle=true to enable
+// e.g. npm run build -- --analyzeBundle=true
+if (analyzeBundle) {
+  config.plugins.push(new BundleAnalyzerPlugin());
+}
+
+// Speed measurement is disabled by default
+// Pass flag --measure=true to enable
+// e.g. npm run build -- --measure=true
+const smp = new SpeedMeasurePlugin({
+  disable: !measure,
+});
+
+module.exports = smp.wrap(config);