您现在的位置是:首页 > 文章详情

单页应用部署时缓存策略

日期:2019-01-09点击:291

问题描述

前端网站采用Vue + Nginx的方式进行生产环境部署。

系统在发布更新次日,收到客户的投诉,发现登录系统之后,出现页面空白问题,刷新几次后显示正常。查看日志发现:

2019/01/07 10:26:01 [error] 19#0: *833 open() "/.../static/js/0.4a66cb25e7f24262c3f6.js" failed (2: No such file or directory), client: XX.XX.XX.XX, server: localhost, request: "GET /static/js/0.4a66cb25e7f24262c3f6.js HTTP/1.1"

问题分析

由于vue在build之后,会重新生成index.html + static资源。从日志判断,【/static/js/0.4a66cb25e7f24262c3f6.js】是上一版本的静态资源。而index.html中get请求获取,跟浏览器缓存有关

但是查看nginx配置,发现没有配置缓存策略。

 server { listen 80 default_server; server_name localhost; root /www/; index index.html index.htm; location / { try_files $uri $uri/ index.html; } } 

当http头中无缓存配置,那么将使用浏览器默认缓存策略,如下:

先放上结论吧,Chrome和Firefox对js、css之类的文件,在内存中的缓存时长,是: (访问时间 - 该文件的最后修改时间) ÷ 10

  • 假设文件 a.js 最后编辑时间是 2018年12月1号 10点0分0秒;
  • Chrome的第一次访问时间是 2018年12月1号 12点0分0秒;
  • 第一次访问与文件编辑时间相差2小时,即7200秒,那么缓存时长就是720秒

解决方案

http请求头中,通过cache-control声明缓存策略。

  • 对于index.html采用no-cache策略,客户端使用缓存,但是使用前需要与服务器确认版本状态。
  • 对于static资源,采用客户端缓存。

nginx配置参考:

 location /index.html { add_header "Cache-Control" "no-cache"; } location /static/ { access_log none; expires 14d; } location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://127.0.0.1:8081; client_max_body_size 500m; } location = / { } 

参考资料

  1. https://blog.csdn.net/youbl/article/details/84879670
  2. https://www.cnblogs.com/feng9exe/p/8083237.html
原文链接:https://my.oschina.net/u/161336/blog/2999036
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章