如何分析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

会自动弹出浏览器打开http://127.0.0.1:8888 可看到分析报告页面

如果需要修改默认端口，可按如下修改配置

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

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

参考博文

vue-cli3配置webpack-bundle-analyzer插件 - 前端先锋 - 博客园

vue-cli3 添加webpack-bundle-analyzer_longyvfengyun的博客-CSDN博客