文档章节

单页应用部署时缓存策略

艳沐石
 艳沐石
发布于 01/09 10:06
字数 536
阅读 585
收藏 15

问题描述

前端网站采用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

© 著作权归作者所有

共有 人打赏支持
艳沐石
粉丝 3
博文 44
码字总数 24301
作品 0
大兴
程序员
私信 提问
加载中

评论(2)

艳沐石
艳沐石

引用来自“山野痞夫”的评论

有没试过,通过Nginx对这个地址rewrite的时候拼接随机数呢?感觉应该是可以的....
拼接随机数,这就是不适用缓存的策略。配置为no-store策略。
配置客户端缓存的意义是提速和降低服务器压力。
华夏第一帅神
华夏第一帅神
有没试过,通过Nginx对这个地址rewrite的时候拼接随机数呢?感觉应该是可以的....
记录一次基于vue、typescript、pwa的项目由开发到部署

前言 最近秋招之余空出时间来按自己的兴趣动手做了一个项目,一个基于的实验浏览移动端webapp,现在趁热打铁,将这个项目从开发到部署整个过程记录下来,并将从这个项目中学习到的东西分享出...

🍼holyZhengs
2018/09/21
0
0
持续部署单页应用的7大技巧

【编者按】本文作者为 Parker Selbert,主要介绍高效部署静态托管应用的7大技巧,助你实现持续、安全且高效的交付流程。本文系国内 [ITOM][1] 管理平台 [OneAPM][2] 编译呈现。 单页应用不仅...

OneAPM蓝海讯通
2016/05/23
39
0
单页切换骨架--mobilebone.js

mobilebone.js 是单页切换骨架。适用于移动web APP, Hybrid混合APP, Phonegap开发, 无兼容要求单页PC应用等。 为何需要? 类原生APP的过场体验,适用于这些场景: 1. Phonegap等类似跨移动开...

叶秀兰
2015/12/10
1K
0
webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存)

webpack算是个磨人的小妖精了。之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下。本来只想玩一下的。尝试打包了以后,就想启个web...

晴天_雨天
2017/06/12
0
0
多页应用增量更新静态资源Webpack打包方案

自从vue、react或者angular这类框架流行后,单页应用的数量也越来越多。但是限制于单页应用的一些缺点,比如:seo、首屏时间等因素,很多应用的结构还是保持了多页面结构。此篇讲述的是如何在...

陈峰163
2018/09/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(11.9)hive操作基础知识

上一篇博客分享了hive的简介和初体验,本节博主将继续分享一些hive的操作的基础知识。 DDL操作 (1)创建表 #建表语法CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name ...

em_aaron
55分钟前
0
0
OSChina 周四乱弹 —— 我家猫真会后空翻

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @我没有抓狂 :#今天听这个# 我艇牛逼,百听不厌,太好听辣 分享 Led Zeppelin 的歌曲《Stairway To Heaven》 《Stairway To Heaven》- Led Z...

小小编辑
今天
1
0
node调用dll

先安装python2.7 安装node-gyp cnpm install node-gyp -g 新建一个Electron-vue项目(案例用Electron-vue) vue init simulatedgreg/electron-vue my-project 安装electron-rebuild cnpm ins......

Chason-洪
今天
3
0
scala学习(一)

学习Spark之前需要学习Scala。 参考学习的书籍:快学Scala

柠檬果过
今天
3
0
通俗易懂解释网络工程中的技术,如STP,HSRP等

导读 在面试时,比如被问到HSRP的主备切换时间时多久,STP几个状态的停留时间,自己知道有这些东西,但在工作中不会经常用到,就老是记不住,觉得可能还是自己基础不够牢固,知识掌握不够全面...

问题终结者
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部