只放一个图片做网站,网址大全123下载安装,做网站选服务器带宽,seo怎么优化排名#x1f440; Nginx Http缓存的必要性#xff01;启发式缓存有什么弊端#xff1f; 简介启发式缓存引发的问题nginx缓存配置 简介
我们在使用React或者Vue开发项目中会使用hash、chunkhash、contenthash来给静态资源文件进行命名。这带来的好处便是当我们部署完项目后… Nginx Http缓存的必要性启发式缓存有什么弊端 简介启发式缓存引发的问题nginx缓存配置 简介
我们在使用React或者Vue开发项目中会使用hash、chunkhash、contenthash来给静态资源文件进行命名。这带来的好处便是当我们部署完项目后用户刷新页面后会重新获取html资源html资源中的js或者css文件由于文件名发生变化会重新发起请求来获取新的资源。当然我们有时候为了项目优化我们还会对一些页面模块进行分包进行懒加载有时候还会把一些模块通过webpack魔法注释chunkName拆到一个包中。
http缓存种类我目前总结了三类分别为强缓存、协商缓存、启发式缓存 这篇文章介绍了强缓存和协商缓存 http缓存
那么如果响应头中没有配置强缓存和协商缓存浏览器会触发启发式缓存。 启发式缓存的缓存有效期计算公式为 (date - last-modified ) * 10%。取响应头中 date 与 last-modified 值之差的百分之十作为缓存时间。启发式缓存比较容易忽略不了解启发式缓存可能会因为这种默认的缓存方式而掉入坑里但一旦你了解了浏览器启发式缓存的机制很多问题都可以得到解决。 启发式缓存引发的问题
通常项目上线后会部署到Nginx服务器。假如我们并没有配置任何响应头来缓存静态资源。那么是会带来一些问题的。 前面已经说了在没有配置任何http缓存的情况浏览器会触发启发式缓存的。那么好比如我们的项目经过第一次打包生成了几个文件main-123abc.js、vender-345abc.js、main-789abc.css、chunk1-123abc.js、chunk1-123abc.css、chunk2-456abc.js、chunk2-456abc.css。当用户访问页面后会触发启发式缓存的而用户并没有关闭页面。 这里的文件名hash我只是举例。
第二天我们在项目里更新了某个chunk内的代码,比如chunk1的代码那么经过构建工具打包又会重新生成一些文件。他们是main-123abc.js、vender-345abc.js、main-789abc.css、chunk1-321abc.js、chunk1-321abc.css、chunk2-456abc.js、chunk2-456abc.css。文件名从 chunk1-123abc变成了chunk1-321abc文件hash会变化这一切都很正常。就这样我们进行了第二次部署。
但此时问题来了这个问题是建立在二次部署后老页面并没有刷新用户访问我们第一次部署的页面并且有了启发式缓存。但是这个缓存是有时效性的他是会过期的过期后浏览器会再次请求过期的那个文件。假如用户访问了chun1的页面但是我们已经进行了第二次部署你觉得会找到chunk1-123abc.js和chunk1-123abc.css吗肯定找不到的那么用户就会看到白屏或者样式丢失。 当然用户刷新页面后就会正常。
此时http强缓存和协商缓存的就能解决这个问题。因为我们的静态js、css文件经过了强缓存用户即便是不关闭页面访问的依然是缓存。就不会出现白屏或者样式丢失的问题。 nginx缓存配置
map $request_filename $cache_control {default ;~*\.(htm|html)$ no-store;~*.* max-age31536000; # 1年的秒数
}server {listen 80;server_name localhost;location / {alias /opt/dist/;try_files $uri /index.html;add_header Cache-Control $cache_control;}
}
