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;
}

附上浏览器缓存规则：

参考：
https://juejin.cn/post/6844903763665240072

React 前端 Nginx 缓存配置相关推荐

nginx缓存配置及开启gzip压缩
一:nginx缓存配置在前一篇文章,我们理解过http缓存相关的知识点, 请看这篇文章. 今天我们来学习下使用nginx服务来配置缓存的相关的知识. nginx配置缓存的优点:可以在一定程度上,减少 ...
nginx默认html缓存,nginx缓存配置
今天试了一下nginx缓存配置,说到缓存相信大家应该都不陌生,也就是把访问后端web服务器的静态请求缓存到本地文件系统一个目录,后端一般是apache服务器居多!当前这两台机器完全可以在一台服务器上, ...
ASP.NET Core 缓存技术及 Nginx 缓存配置
前言在Asp.Net Core Nginx部署一文中,主要是讲述的如何利用Nginx来实现应用程序的部署,使用Nginx来部署主要有两大好处,第一是利用Nginx的负载均衡功能,第二是使用Nginx ...
nginx 缓存配置详解都是干货
一.缓存类型 1.服务端缓存 2.代理缓存 3.客户端缓存 4.代理缓存的工作流程: 二.代理缓存配置语法 1.代理缓存路径配置语法 Syntax: proxy_cache_path path [l ...
nginx 缓存配置及报错解决
研究了2天的nginx缓存出现各种报错我把配置文件修改过后还是报错 1 2 3 4 5 6 7 location ~ /purge(/.*) { ...
Nginx——缓存配置
缓存配置对于一个含有大量内容的网站来说,随着访问量的增多,对于经常被用户访问的内容,若每一次都要到后端服务器中获取,会给服务器造成很大的压力.为此,利用反向代理服务器对访问频率较多的内容进行缓存,有 ...
Nginx缓存配置（简易实现CDN功能）
环境推荐使用openresty,自带了挺多模块的,如果直接使用nginx,需要对缺少的模块进行添加,添加教程参照百度或者OpenResty教程 1.本地站点ETag缓存示范开启静态文件缓存环境: ...
Nginx缓存配置教程
问题引出假设某电商平台商品详情页需要实现 700 QPS(假设宽带是千兆宽带) 千M局域网宽带网卡速率按照1000进位,所以1Gbps=1,000,000,000bps=125,000,000Bps ...
性能测试中间件Nginx缓存配置
缓存配置在解决高并发性能问题时,缓存是其中的一种手段.本文简单介绍nginx缓存的配置方法,详细可以参考nginx官方文档我的nginx配置如下 # 设置缓存内容 proxy_cache_path ...

React 前端 Nginx 缓存配置

React 前端 Nginx 缓存配置

React 前端 Nginx 缓存配置相关推荐

最新文章

热门文章