Vue打包导致 JS 很大的问题解决【完美解决】

亦凉 2022-04-16 05:06 3053阅读 0赞

先来叨叨一下： 这个问题困扰我很久了，一直没有解决。最后只好把 js 放到七牛云上面cdn，没想到，这样直接导致，流量访问超出，达到了百分之600，然后被通知欠费。这才痛下决心一定要解决这个问题。阅读下面的文章，一定会给你带来帮助，你所遇到的问题我基本都遇到了。

# 问题说明：打包导致 js 很大，然后访问特别慢。 #

Q：如果你的 js 达到了好几M，（除了个别情况，比如的代码量真的超级大到不行，其实这个本身就不成立）。我最开始就是，打包了我的 app.js  是 8M，网站基本瘫痪。

A：不用考虑了，你的打包有问题。我当初的问题是我把 静态的json （基本都是这个问题）给打包进去了。[https://blog.csdn.net/Tomwildboar/article/details/85340834][https_blog.csdn.net_Tomwildboar_article_details_85340834]

如果你不想去改，就想这样，那么你可以去找个cdn 来加速你的js。我当初用的是七牛，把这几个js放到七牛上          面，在你的index.html 中引入就好了（超级费流量，钱多无视）（还有你的静态资源不要随便乱放，准确位置）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70][]

你打包的好的 js 在1-2M左右，这还算是比较正常的，但是这个大小也让我们接受不了。下面我们来一点点的开始优化

优化前

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1][]

### 1、我们先来进行 路由懒加载 优化  [https://blog.csdn.net/Tomwildboar/article/details/85342603][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=开发

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2][]

**优化后的结果**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3][]**

### 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;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 4][]

**加在这个位置**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 5][]**

### 4、做到这里，基本上已经差不多了。 ###

但是如果你还是不满意，还想去进行优化。那么你把  vue vue-router axios 等等，比如我的wangeditor，echarts，element-ui，vuex，font-awesome。  全部不要安装了。  都使用 cdn 。我就是这样做的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 7][]

这个地方就有些极端了， 看个人需求吧。  cdn  网站  [https://www.bootcdn.cn/][https_www.bootcdn.cn]

有问题可以给我留言，我会尽快回复你的。

[https_blog.csdn.net_Tomwildboar_article_details_85340834]: https://blog.csdn.net/Tomwildboar/article/details/85340834
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220416/7afa230b05aa4ede81857769d9817d98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20220416/a5a5071329cb4834b094dca0b11b965c.png
[https_blog.csdn.net_Tomwildboar_article_details_85342603]: https://blog.csdn.net/Tomwildboar/article/details/85342603
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: /images/20220416/2101d217db1c4ca296cd0f847b916cc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]: /images/20220416/a2e06611e20e4b04a22c08711a4330cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 4]: /images/20220416/b9e0375aaed34121b35ba2f97cf74015.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 5]: /images/20220416/f37a657a4296466b87feee6c21b8c141.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 6]: /images/20220416/0acc00deb7344f7bb77e1f4202b39934.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 7]: /images/20220416/b96c6c3e81ed40f498b483fb56b82975.png
[https_www.bootcdn.cn]: https://www.bootcdn.cn/