[JavaScript知识库]一、vue-cli4打包优化#学会分析查看包依赖关系和大小

学会分析（查看）包依赖关系和大小

基础项目环境：
vue：3.0
element-plus：^2.1.10
ts和js项目通用

查看工具：
webpack-bundle-analyzer：^4.5.0

安装：

yarn add webpack-bundle-analyzer -D

// vue.config.js
module.exports = {
    chainWebpack: (config) => {
        if (process.env.analyzer == "1") {
            /**
             * 分析器，可以查看打包之后的效果
             * npm run build:analyzer
             * 运行后会打开一个网址
             * 
             */
            config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
        }
    }
}

// package.json
{ 
  "scripts": { 
    "build:analyzer":"vue-cli-service build --mode analyzer"
  }
}

# .env.analyzer
NODE_ENV = "production"		
analyzer = 1		# 关键环境变量，其他变量请自行复制你们的配置

运行命令查看效果

npm run build:analyzer

他会自己打开浏览器，请注意观察

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖