一、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

他会自己打开浏览器,请注意观察
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值