Browse Source

allow bundle analysis at build stage

Useful for understanding bundle contents and making decisions on where to code split / lazy load.
master
james hadfield 4 years ago
parent
commit
1ba5563830
  1. 3
      cli/build.js
  2. 4
      package.json
  3. 8
      webpack.config.js

3
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) */

4
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"
}
}

8
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"

Loading…
Cancel
Save