diff --git a/template/README.md b/template/README.md index aca6ae08ad..a69064231a 100644 --- a/template/README.md +++ b/template/README.md @@ -13,6 +13,9 @@ npm run dev # build for production with minification npm run build + +# build for production and view the bundle analyzer report +npm run build --report {{#unit}} # run unit tests diff --git a/template/build/webpack.prod.conf.js b/template/build/webpack.prod.conf.js index 5608d4c1ff..a2d757ec4f 100644 --- a/template/build/webpack.prod.conf.js +++ b/template/build/webpack.prod.conf.js @@ -95,4 +95,9 @@ if (config.build.productionGzip) { ) } +if (config.build.bundleAnalyzerReport) { + var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin + webpackConfig.plugins.push(new BundleAnalyzerPlugin()) +} + module.exports = webpackConfig diff --git a/template/config/index.js b/template/config/index.js index 207dfbd4e0..356c361499 100644 --- a/template/config/index.js +++ b/template/config/index.js @@ -14,7 +14,12 @@ module.exports = { // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, - productionGzipExtensions: ['js', 'css'] + productionGzipExtensions: ['js', 'css'], + // Run the build command with an extra argument to + // View the bundle analyzer report after build finishes: + // `npm run build --report` + // Set to `true` or `false` to always turn it on or off + bundleAnalyzerReport: process.env.npm_config_report }, dev: { env: require('./dev.env'), diff --git a/template/package.json b/template/package.json index 5dde32c171..24cf1285a3 100644 --- a/template/package.json +++ b/template/package.json @@ -55,6 +55,7 @@ "html-webpack-plugin": "^2.28.0", "http-proxy-middleware": "^0.17.3", "json-loader": "^0.5.4", + "webpack-bundle-analyzer": "^2.2.1", {{#unit}} "cross-env": "^3.1.4", "karma": "^1.4.1",