allow bundle analysis at build stage

Useful for understanding bundle contents and making decisions on where to code split / lazy load.

cli/build.js

@@ -15,6 +15,7 @@ const addParser = (parser) => {
   subparser.addArgument('--extend', {action: "store", help: "extension config"});
   subparser.addArgument('--includeTiming', {action: "storeTrue", help: "keep timing functions (default: false for speed reasons)"});
   subparser.addArgument('--serverless', {action: "storeTrue", help: "e.g gh-pages"});
+  subparser.addArgument('--analyzeBundle', {action: "storeTrue", help: "Interactive bundle analyzer tool"});
 };
 
 const run = (args) => {
@@ -22,7 +23,7 @@ const run = (args) => {
   /* webpack set up */
   const extensionPath = args.extend ? path.resolve(args.extend) : undefined;
   const customOutputPath = utils.customOutputPath(args.extend);
-  const webpackConfig = generateWebpackConfig({extensionPath, devMode: false, customOutputPath});
+  const webpackConfig = generateWebpackConfig({extensionPath, devMode: false, customOutputPath, analyzeBundle: args.analyzeBundle});
   const compiler = webpack(webpackConfig);
 
   /* variables available to babel (which is called by webpack) */

package.json

@@ -119,5 +119,7 @@
     "whatwg-fetch": "^0.10.1",
     "yaml-front-matter": "^4.0.0"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "webpack-bundle-analyzer": "^3.0.3"
+  }
 }

webpack.config.js

@@ -5,9 +5,10 @@ const CompressionPlugin = require('compression-webpack-plugin');
 const fs = require('fs');
 const utils = require('./cli/utils');
 
+
 /* Webpack config generator */
 
-const generateConfig = ({extensionPath, devMode=false, customOutputPath}) => {
+const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyzeBundle=false}) => {
   utils.verbose(`Generating webpack config. Extensions? ${!!extensionPath}. devMode: ${devMode}`);
 
   /* which directories should be parsed by babel and other loaders? */
@@ -57,6 +58,11 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath}) => {
     pluginCompress
   ];
 
+  if (analyzeBundle) {
+    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // eslint-disable-line
+    plugins.push(new BundleAnalyzerPlugin());
+  }
+
   const entry = [
     "babel-polyfill",
     "./src/index"