使用webpack-bundle-analyzer进行项目打包大小优化

以vue为例 npm下载依赖包 npm i webpack-bundle-analyzer@版本号

本人版本

"webpack-bundle-analyzer": "^3.8.0"

vue.config.js引入以及执行 // 分析包的大小

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const isAnalyz = process.env.NODE_ENV === 'analyz'; // 获取本地指令，判断是否执行分析包指令
module.exports ={
    ...,
    configureWebpack: (config) => {
        ....，
        if (isAnalyz) {
          config.plugins.push(new BundleAnalyzerPlugin());
        }
        ...，
      },
    
}

package.json配置指令

"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "analyz": "cross-env NODE_ENV=analyz npm_config_report=true yarn build", //按顺序执行指令，并给NODE_ENV赋值analyz
    "lint": "eslint src/",
  },

最后执行analyz指令就可以了，执行完成后会打开一个web页面，上面显示每个依赖包的大小占比，根据占比去修改包就可以了