[Vue CLI 3] 配置 webpack-bundle-analyzer 插件

首先仍是簡單介紹一下 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"

來源：http://www.javashuo.com/article/p-kubgmvgj-gw.html