webpack-bundle-analyzer + Vue

1 安装 webpack-bundle-analyzer

npm install –-save-dev webpack-bundle-analyzer 

2 配置 packagen.json

"scripts":{
"analyze": "npm_config_report=true vue-cli-service build --mode analyze"
}

3 创建环境变量

.env.analyze

NODE_ENV='production'
ANALYZ_ENV=true

4 webpack 设置插件

vue.config.js:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin;

configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
      if (process.env.ANALYZ_ENV) {
        config.plugins.push(new BundleAnalyzerPlugin());
      }
  }
}

3 开始分析

npm run analyze

会自动启动页面 http://127.0.0.1:8888/

image.png

参考：

https://medium.com/js-dojo/how-to-reduce-your-vue-js-bundle-size-with-webpack-3145bf5019b7