vue打包出来的dist如何查看js的占比,report生成分析图

1. 安装npm包
   npm install compression-webpack-plugin@5.0.1

2. 配置vue.config.js

   在chainWebpack中添加配置

// 分析工具
        if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        }

3. 配置package.json
   在scripts中添加

 "report": "vue-cli-service build  --report"

4. 然后执行 npm run build --report
   会自动跳转到http://127.0.0.1:8888/路径
   

   这是生成的占比图，可以根据个个js占比去优化