vue项目加载慢,Nginx页面优化

简介: vue项目加载慢,Nginx页面优化

优化的思路:

F12调起调试模式,查看js和css加载所需时间(注意由于资源过大导致的加载过慢),

下图是经过压缩后的,压缩前chunk-vendors.js我的接近10M,加载几十毫秒。

如果部署在Nginx上的web项目,可以配置Nginx,对js和css进行压缩可在 Nginx 配置文件 server { } 加入如下配置:

gzip on;
  gzip_buffers 32 4K;
  gzip_comp_level 6;
    gzip_min_length 100;
  gzip_types application/javascript text/css text/xml;
    gzip_disable "MSIE [1-6]\."; 
    #配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
    gzip_vary on;

最终效果如下:

目录
相关文章
|
17天前
|
运维 应用服务中间件 Linux
LNMP详解(十三)——Nginx子页面详解
LNMP详解(十三)——Nginx子页面详解
15 3
|
3月前
|
应用服务中间件 Shell 开发工具
nginx+shell脚本实现一键启用与关闭停机维护页面
nginx+shell脚本实现一键启用与关闭停机维护页面
33 0
|
3月前
|
存储 应用服务中间件 数据库
C++文件服务器项目—Nginx+FastDFS插件—5
C++文件服务器项目—Nginx+FastDFS插件—5
40 0
|
22天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
91 0
|
1月前
|
前端开发 应用服务中间件 nginx
nginx中配置不输入端口(指定地址)访问项目的方法
nginx中配置不输入端口(指定地址)访问项目的方法
26 0
|
24天前
|
运维 前端开发 应用服务中间件
LNMP详解(八)——Nginx动静分离实战配置
LNMP详解(八)——Nginx动静分离实战配置
27 0
|
1月前
|
应用服务中间件 nginx
Nginx中如何配置中文域名?
Nginx中如何配置中文域名?
42 0
|
3天前
|
安全 应用服务中间件 网络安全
SSL原理、生成SSL密钥对、Nginx配置SSL
现在,你的Nginx虚拟主机应该已经配置了SSL,可以通过HTTPS安全访问。确保在生产环境中使用有效的SSL证书来保护通信的安全性。
10 0
|
5天前
|
域名解析 缓存 负载均衡
Nginx正向代理域名的配置
Nginx正向代理域名的配置