vue cli3.x development模式打包app.js包太大

vue cli3.x  development模式打包app.js包太大

一、背景:升级老项目遇到的问题
1.项目目录

www.zeeklog.com  - vue cli3.x  development模式打包app.js包太大


2.package.json

www.zeeklog.com  - vue cli3.x  development模式打包app.js包太大


3. env配置
.env.development 配置

NODE_ENV=development
VUE_APP_BASE_API=开发
VUE_APP_BUCKET=开发

.env.production配置

NODE_ENV=production
VUE_APP_BASE_API=生产
VUE_APP_BUCKET=生产

4.执行npm run build:dev
打包后,发现app.js 有十几兆,上传到服务器,根本无法打开(时间太久)

www.zeeklog.com  - vue cli3.x  development模式打包app.js包太大

二、解决方式(暂时能解决的,有可能还有更好的办法)
1.在根目录下新建.env.dev文件
配置如下(内容和.env.development文件一致,NODE_ENV改为production

NODE_ENV=production
VUE_APP_BASE_API=开发
VUE_APP_BUCKET=开发

2.修改package.json

www.zeeklog.com  - vue cli3.x  development模式打包app.js包太大

3.执行npm run build:dev
发现分包,压缩都可以了

www.zeeklog.com  - vue cli3.x  development模式打包app.js包太大

4.原理其实是借用production模式来载入开发的环境变量