html中为css、js、配置文件等静态资源加上时间戳,防止浏览器缓存

前言

  • 在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可强制刷新页面

后语

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云帆Plan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值