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;

最终效果如下:

目录
相关文章
|
3月前
|
负载均衡 前端开发 应用服务中间件
负载均衡指南:Nginx与HAProxy的配置与优化
负载均衡指南:Nginx与HAProxy的配置与优化
240 3
|
5月前
|
缓存 前端开发 JavaScript
|
5月前
|
JavaScript 应用服务中间件 nginx
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
282 1
|
5月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
1642 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
5月前
|
JavaScript 应用服务中间件 开发工具
vue尚品汇商城项目-day07【53.nginx反向代理配置】
vue尚品汇商城项目-day07【53.nginx反向代理配置】
48 4
|
5月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
307 0
|
5月前
|
缓存 监控 负载均衡
nginx相关配置及高并发优化
Nginx的高并发优化是一个综合性的过程,需要根据具体的业务场景和硬件资源量身定制。以上配置只是基础,实际应用中还需根据服务器监控数据进行持续调整和优化。例如,利用工具如ab(Apache Benchmarks)进行压力测试,监控CPU、内存、网络和磁盘I/O等资源使用情况,确保配置的有效性和服务的稳定性。
214 0
|
应用服务中间件 Linux PHP
nginx怎么部署php项目,如何php项目部署到nginx
php项目部署到nginx的方法:首先安装“Nginx”和“php-fpm”;然后将项目复制到“nginx/html”文件下;接着修改配置文件;最后重新载入Nginx并启动“php-fpm”即可。
|
4月前
|
缓存 应用服务中间件 网络安全
Nginx中配置HTTP2协议的方法
Nginx中配置HTTP2协议的方法
276 7
|
6天前
|
应用服务中间件 nginx
Nginx进程配置指令详解
Nginx进程配置指令主要包括:`worker_processes`设置工作进程数;`worker_cpu_affinity`绑定CPU核心;`worker_rlimit_nofile`设置最大文件描述符数量;`worker_priority`设置进程优先级;`worker_connections`设置最大连接数;`daemon`控制守护进程模式;`master_process`启用主进程模式;`pid`设置PID文件路径;`user`指定用户和组;`error_log`配置错误日志。这些指令在`nginx.conf`中配置,用于优化和控制Nginx的运行行为。
29 10