本文记录了在VueCLI开发项目中遇到的vendorjs和appjs文件过大的问题及解决方案。通过CDN引入依赖、Webpack配置external、按需引入Echarts并使用Gzip压缩，有效减小了文件大小，提升了页面加载速度。
项目上线后，浏览器第一次加载会特别特别慢，network中看到vendorjs文件1.9M，不慢才怪。
echarts按需引入后，也有1.1M左右，由于对vue脚手架理解不深，自己扒了大量的文档，又测
试了很多次，才测试成功，暂时简单记录下。
npm run build --report
可以查看文件的大小分布 罪魁祸首是elementui和echarts()
1- app.js存放页面中的js操作，使用路由的按需加载，可把app.js分隔成多个小的js文件
此时分隔好的js文件要看各页面中的业务代码量，其中我这里单独的一个图表页还是很大，
800k左右，又是echarts的锅。暂时放这。
2- vendorjs中是项目中所有引用的依赖包，即使用的vue、eleui、axios等等插件框架什么
的都在这里边，怪不得大。
参考文档，找到以下解决方法：
# cdn引入插件
# 打包时使用Gzip
2.1- cdn引入：
1.index.html文件中引入link/script引入(cdn或ukg链接)
2.build/webpack.base.conf.js中添加external配置，webpack打包时会跳过配置中的插件
3. 去除import...from..和use什么的，不去除照样会打包，其他照常
然后就OK了，我看到的文档大都是这样的，不是很清晰哈，那看代码
index.html (tips: 先后顺序、引入的地方)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <link rel="stylesheet" href
最低0.47元/天 解锁文章
扫一扫
1618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
