Nginx Http缓存的必要性!启发式缓存有什么弊端?

👀 Nginx Http缓存的必要性!启发式缓存有什么弊端?

简介

我们在使用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缓存配置

javascript 复制代码
map $request_filename $cache_control {
    default "";
    ~*\.(htm|html)$ "no-store";
    ~*.* "max-age=31536000"; # 1年的秒数
}


server {
    listen 80;
    server_name localhost;

    location / {
        alias /opt/dist/;
        try_files $uri /index.html;

        add_header Cache-Control $cache_control;
    }
}
相关推荐
小曲曲32 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
只因在人海中多看了你一眼39 分钟前
分布式缓存 + 数据存储 + 消息队列知识体系
分布式·缓存
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
Dlwyz2 小时前
redis-击穿、穿透、雪崩
数据库·redis·缓存
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端