首先還是簡單介紹一下 webpack-bundle-analyzer 是做什么的：
Visualize size of webpack output files with an interactive zoomable treemap.
一個很強大的用來優化打包之后文件提交的工具。
在老版本的腳手架里面已經多幫你配置好了，在 build/webpack.prod.conf.js 文件中：
判斷是否配置了 bundleAnalyzerReport，如果配置了，加載 webpack-bundle-analyzer 工具包，調用了 BundleAnalyzerPlugin，最終還是 push 到 plugins 對象中：
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
在 config/index.js 文件中：配置了 build 對象的 bundleAnalyzerReport
module.exports = {
build: {
bundleAnalyzerReport: process.env.npm_config_report
}
}
那在新版本里面，我們在 vue.config.js 中如何配置呢？
第一個想到的還是通過 chainWebpack 配置，再看看它的官方說明：
是一個函數，會接收一個基於 webpack-chain 的 ChainableConfig 實例。
允許對內部的 webpack 配置進行更細粒度的修改。
chainWebpack: config => {
// ...
}
然后是如何通過 config 生成一個 plugin：
我們查看一下 webpack-chain 插件的 README.md，有如下一段：
config
.plugin(name)
.use(WebpackPlugin, args)
參照如上格式，有 2 個示例如下：
// Examples
config
.plugin('hot')
.use(webpack.HotModuleReplacementPlugin);
config
.plugin('env')
.use(webpack.EnvironmentPlugin, ['NODE_ENV']);
所以，照着上面的模板，我們也很簡單就寫出來了：
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
但是還不夠，我們需要加一些限制條件，類似老版本腳手架里面的：
if (process.env.npm_config_report) {
// ...
}
然后我們可以在 package.json 中增加 scripts：
key 是：analyz
value 是：npm_config_report=true npm run build
"analyz": "npm_config_report=true npm run build"