前端優化-使用webpack-bundle-analyzer分析js包大小

webpack-bundle-analyzer + Vue

1 安裝 webpack-bundle-analyzer

npm intall webpack-bundle-analyzer –save-dev

2 配置 packagen.json

"scripts":{
  "analyz": "NODE_ENV=production npm_config_report=true npm run build"
}

3 webpack 設置插件

vue.config.js:

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

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

3 開始分析

npm run analyz

會自動啓動頁面 http://127.0.0.1:8888/

參考：

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