nginx缓存静态资源，只需几个配置提升10倍页面加载速度

Posted 2020-11-15 lvcisco

nginx缓存静态资源，只需几个配置提升10倍页面加载速度

首先我们看图说话

这是在没有缓存的情况下，这个页面发送了很多静态资源的请求：

 

1.png

可以看到，静态资源占用了整个页面加载用时的90%以上，而且这个静态资源还是已经在我使用了nginx配置压缩以后的大小，如果没有对这些静态资源压缩的话，那么静态资源加载应该会占用这个页面展示99%以上的时间。听起来是不是已经被吓到了，但是数据已经摆在这里了，这可不是危言耸听。

然后再看看使用了nginx缓存之后的效果图：

 

 

2.png

看到没有，朋友们，整个页面只有请求接口的时间和从本地磁盘加载css的时间。页面加载速度直接提升10倍以上！并且由于我这个页面没有采用前后端分离的方式，所以html没有缓存下来，如果采用了前后端分离架构的话，就连html都可以直接缓存，那提升的速度可想而知。当然由于浏览器或者手机端对页面加载的优化我们并不能很直观的感受到10倍的提升，实际上以肉眼观察的话，差不多减少了一半的时间，并且由于并没有向后端服务器请求这些静态资源，也相当于对后端服务器做了一层保护措施。

首先在http模块加配置：

# 开启gzip
gzip  on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间。一般设置1和2
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6].";
# 设置缓存路径并且使用一块最大100M的共享内存，用于硬盘上的文件索引，包括文件名和请求次数，每个文件在1天内若不活跃（无请求）则从硬盘上淘汰，硬盘缓存最大10G，满了则根据LRU算法自动清除缓存。
proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;

 

关于模块以及nginx配置信息在上一篇文章有说明。

可以看到在http模块中主要是使用gzip压缩，最后一个配置才是和缓存有关的配置。

然后是server中加上location配置

location ~* ^.+.(css|js|ico|gif|jpg|jpeg|png)$ {
 log_not_found off;
 # 关闭日志
 access_log off;
 # 缓存时间7天
 expires 7d;
 # 源服务器
 proxy_pass http://localhost:8888;
 # 指定上面设置的缓存区域
 proxy_cache imgcache;
 # 缓存过期管理
 proxy_cache_valid 200 302 1d;
 proxy_cache_valid 404 10m;
 proxy_cache_valid any 1h;
 proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
 }

 

加上这两块配置之后，就能享受到缓存给你带来的快乐了。当然系统优化之路还是相当漫长的，nginx缓存只是其中的一块而已，想要把系统达到完美还需要在很多地方下功夫，比如这些静态资源完全可以直接在客户端缓存，这样连请求都不会往服务端发了，更大的减轻服务器的压力。