Vue app.js文件过大，带宽占用过大，优化方案（持续优化）

最新推荐文章于 2025-01-15 11:53:28 发布

原创最新推荐文章于 2025-01-15 11:53:28 发布 · 5.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #gzip #app文件过大 #页面打开慢

vue学习笔记专栏收录该内容

5 篇文章

订阅专栏

博客分享了针对Vue app.js文件过大的优化方案，主要通过在Nginx中启用gzip压缩来减少带宽占用。启用gzip后，app.js文件大小缩小至原来的五分之一，页面加载时间从5秒降低到600ms，显著提升了用户体验。

Vue app.js文件过大，带宽占用过大，优化方案

前言

最近我的网站在使用的过程中发现加载缓慢问题，在没有缓存的情况下页面打开速度需要五秒，这对于用户体验来说是不友好的。通过查找网上的方案
我实验之后确实有效，特分享给大家

方案一 Nginx 启用gzip

找到nginx.conf文件
修改#gzip on 启用
并添加下列信息

gzip  on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/css  text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";

添加完毕后使用 ./nginx -s reload刷新一下nginx
如图：
在这里插入图片描述