先来叨叨一下: 这个问题困扰我很久了,一直没有解决。最后只好把 js 放到七牛云上面cdn,没想到,这样直接导致,流量访问超出,达到了百分之600,然后被通知欠费。这才痛下决心一定要解决这个问题。阅读下面的文章,一定会给你带来帮助,你所遇到的问题我基本都遇到了。
问题说明:打包导致 js 很大,然后访问特别慢。
Q:如果你的 js 达到了好几M,(除了个别情况,比如的代码量真的超级大到不行,其实这个本身就不成立)。我最开始就是,打包了我的 app.js 是 8M,网站基本瘫痪。
A:不用考虑了,你的打包有问题。我当初的问题是我把 静态的json (基本都是这个问题)给打包进去了。https://blog.csdn.net/Tomwildboar/article/details/85340834
如果你不想去改,就想这样,那么你可以去找个cdn 来加速你的js。我当初用的是七牛,把这几个js放到七牛上 面,在你的index.html 中引入就好了(超级费流量,钱多无视)(还有你的静态资源不要随便乱放,准确位置)
你打包的好的 js 在1-2M左右,这还算是比较正常的,但是这个大小也让我们接受不了。下面我们来一点点的开始优化
优化前
1、我们先来进行 路由懒加载 优化 https://blog.csdn.net/Tomwildboar/article/details/85342603
2、我们再来把 js,和css弄成 运行时的。
2-1:创建 .env.dev 文件 并输入下面的内容
NODE_ENV=production
VUE_APP_BASE_API=开发
VUE_APP_BUCKET=开发
优化后的结果
3、压缩优化
我们可以看到打包后面都有一个压缩大小,基本大小又小了三分一。 下面写一下 nginx 下的压缩。
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain application/xml application/javascript;
加在这个位置
4、做到这里,基本上已经差不多了。
但是如果你还是不满意,还想去进行优化。那么你把 vue vue-router axios 等等,比如我的wangeditor,echarts,element-ui,vuex,font-awesome。 全部不要安装了。 都使用 cdn 。我就是这样做的
这个地方就有些极端了, 看个人需求吧。 cdn 网站 https://www.bootcdn.cn/
有问题可以给我留言,我会尽快回复你的。