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;

最终效果如下:

目录
相关文章
|
20天前
|
运维 应用服务中间件 Linux
LNMP详解(十三)——Nginx子页面详解
LNMP详解(十三)——Nginx子页面详解
15 3
|
3月前
|
应用服务中间件 Shell 开发工具
nginx+shell脚本实现一键启用与关闭停机维护页面
nginx+shell脚本实现一键启用与关闭停机维护页面
33 0
|
3月前
|
存储 应用服务中间件 数据库
C++文件服务器项目—Nginx+FastDFS插件—5
C++文件服务器项目—Nginx+FastDFS插件—5
43 0
|
26天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
102 0
|
1月前
|
前端开发 应用服务中间件 nginx
nginx中配置不输入端口(指定地址)访问项目的方法
nginx中配置不输入端口(指定地址)访问项目的方法
27 0
|
JavaScript 应用服务中间件 nginx
Vue项目打包部署Nginx配置
Vue项目打包部署Nginx配置
566 0
|
27天前
|
运维 前端开发 应用服务中间件
LNMP详解(八)——Nginx动静分离实战配置
LNMP详解(八)——Nginx动静分离实战配置
28 0
|
1月前
|
应用服务中间件 nginx
Nginx中如何配置中文域名?
Nginx中如何配置中文域名?
46 0
|
3天前
|
JavaScript 前端开发 应用服务中间件
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
11 0
|
3天前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
19 0