前言
- 在web前端中,难免会在根目录下或其他目录下放一个配置js文件(方便在发布后修改一些参数),或者一些静态资源文件,但由于浏览器缓存使得客户端获取到的配置文件不一定是最新的
解决方案
方案1 - html引入时使用脚本片段(推荐)
此方案最简单便捷
<script src="config.js?_t=<%=Date.now()%>" type="text/javascript"></script>
<link rel="stylesheet" href="/css/xxx.css?_t=<%=Date.now()%>">
(请注意:仅webpack支持,vite不支持此方案)
效果如下:
方案2 - document.write
使用document.write可以阻塞当前的加载,直到write中的标签加载成功,可防止配置文件未被加载但已经进入主页面了
但实际上mdn已经不建议使用document.write方法了,会导致一些性能问题
<script>document.write("<script type='text/javascript' src='xxx.js?t=" + Date.now() + "'><\/script>");</script>
控制台会报警告
方案3 - script+立即执行代码
这种方案比较灵活
<script type="text/javascript">
(function(){
var randomh=Math.random();
var e = document.getElementsByTagName("script")[0];
var d = document.createElement("script");
d.src = "{配置文件路径}?x="+randomh+"";
d.type = "text/javascript";
d.async = true; // 根据需求设置
d.defer = true; // 根据需求设置
e.parentNode.insertBefore(d,e);
})();
</script>
方案4 - nginx配置不缓存
nginx使用 add_header Cache-Control no-store;
但这么做的话部署的时候会多一个修改nginx配置文件的步骤
server {
listen 89;
location /{
alias /var/www/xxx/dist/;
error_page 405 =200 $uri;
if ($request_filename ~ .*\.(js|css)$) {
add_header Cache-Control max-age=2592000;
}
if ($request_filename ~* .*\.(?:htm|html)$) {
add_header Cache-Control 'no-cache, no-store';
}
if ($request_filename ~* .*config\.js$) {
add_header Cache-Control 'no-cache, no-store';
}
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
方案5 - 客户端操作
- Ctrl + F5可强制刷新页面