前端项目更新的缓存问题

问题描述：

微信公众号前端项目更新总会遇到不会加载最新代码问题，需要进行多次刷新或手动清空微信缓存。

问题分析：

1、前端项目本身是否存在缓存配置；

2、nginx 是否存在缓存配置。

解决方案：

在前端项目配置做过动态 hash 处理的前提下，更新后构建输出的 css js 图片等文件会被重新请求，只需要考虑如何禁用 index.html 缓存。

1、index.html 如果存在以下禁用缓存配置，应进行删除处理

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

2、nginx 配置

location /demo1 {
  alias  E:/nginx-1.20.2/front/demo1;  
  index  index.html;
  # 只禁用入口页面缓存
  if ($request_filename ~* .*\.(?:htm|html)$) {
    add_header Cache-Control 'private, no-store, max-age=0';
  } 
}

参考资料：

• Cache-Control

• Pragma

• Expires

• HTTP 缓存

• HttpHeaders模块