如何分析vuejs前端打包文件的体积分布情况

1.安装用于分析包的模块

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

2.vue.config.js增加如下内容

module.exports = {
  chainWebpack: config => {
    if(process.env.analyzer)
        config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  }
}

 3. package.json增加一条script -- "analyzer"

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "analyzer": "set analyzer=true && vue-cli-service build "
  },

 4.命令行下输入

npm run analyzer

可看到分析报告页面

 

参考博文

https://www.cnblogs.com/ttjm/p/11724230.html