React 前端 Nginx 缓存配置

最新开发钉钉微应用，上线后发现 2 个问题：

1.每次更新后，需要用户手动刷新获取最新的 HTML 和最新的 js，经常被客户吐槽为什么 bug 还没改，其实早已经改了，客户手机上跑的还是旧版。

2.不设置缓存策略的情况下，无论本地是否有缓存，华为手机上竟然是每次重新请求 js、css，每次打开很慢，体验极差。

为了解决这个问题，将 HTML 文件的缓存策略设置为协商缓存，也就是每次都会询问服务器本地是否最新，如果最新，服务器返回 304 而不传输文件，本地加载缓存文件；如果本地文件非最新，服务器就会返回最新文件，本地展示最新文件并更新本地缓存。浏览器询问本地是否最新用到了 ETag 和 Last-Modified。

ETag 由 Nginx 生成，生成规则为：

文件最后修改时间 16 进制-文件长度 16 进制。例：ETag： “59e72c84-2404”
文件长度

10进制为->9220
转为16进制->2404

文件最后修改时间：

标准日期格式->Sat, 21 Oct 2017 09:14:34 GMT
转为秒->1508322436
转为16进制->59e72c84

由此可见，只要更新了 html 文件，浏览器一定会重新加载 HTML，不会出现更新之后，用户跑的还是旧版的问题，解决问题 1。

由于华为手机默认不使用缓存，并且为了节省带宽，提高用户加载速度，js、css 以及常用的静态资源应该强制使用缓存。由于 react 每次打包后，只要代码更改了，js 和 css 文件名一定会变化，所以也不用担心由于强缓存导致浏览器运行旧版代码的问题，这样就解决了第二个问题。

以下是设置 HTML 文件协商缓存，js、css 强缓存的 Nginx 配置

location /test/ {...#其他配置...if ($request_uri ~* .*[.](js|css|map|jpg|png|svg|ico)$) {add_header Cache-Control "public, max-age=2592000";#非html缓存1个月}if ($request_filename ~* ^.*[.](html|htm)$) {add_header Cache-Control "public, no-cache";#html文件协商缓存，也就是每次都询问服务器，浏览器本地是是否是最新的，是最新的就直接用，非最新的服务器就会返回最新}# try_files $uri $uri/ /index.html;
}

附上浏览器缓存规则：