缓存

前端资源（html/css/js）清除缓存处理方案 by sandyliang整理

如果前端资源部署在服务端，每次发布（投产）需考虑清除缓存。

单页面应用的index.html文件，避免缓存方案：

1) 通过设置类似index.html?v=1.0.1 即路径上带随机数（每次投产配置不同时间戳或版本号）；

2) HTTP1.1提供了几种限制缓存的方式。通过在服务端设置HTTP-Header响应头部设置Cache-Control: no-store（这样的做法用户每次访问的index.html页面都从服务器读取，不读浏览器缓存）

举例：若index.html页面是部署在nginx服务器上，可以在nginx 配置如下：

location ~ .*\.(html)$ {
  add_header Cache-Control no-store;
}

通过HTTP-EQUIV控制HTML缓存。在index.html 页面

<HTML>
    <HEAD>
        <TITLE>My Document</TITLE>
        <META  HTTP-EQUIV="Pragma" CONTENT="no-cache" />
    </HEAD>
...

此方案虽然做法简单，但是只有部分浏览器支持，故此法不靠谱，应规避这么做。

未发生更改的文件利用缓存以提高加载性能（不更改文件名称/不更改路径带的随机数）；发生更改的文件，可由webpack设置动态编译出带随机码名称文件，例如app.v342.js，或手动配置随机数，例如：app.js?v=1.0.1

是否有效可以使用chrome Network面板，刷新页面查看Status Code 读取状态。例如

Last updated 5 years ago

Was this helpful?