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

后语

• 参考文章：
  • How to append timestamp to the javascript file in <script> tag url to avoid caching
  • 如何在引用javascript、css文件时添加时间戳，解决浏览器缓存问题