静态资源版本控制（缓存击穿）：纯HTML环境下如何自动实现？

一、查询参数式版本控制 #

这种方式不用改文件名，给资源URL加?v=版本号触发缓存更新，不用手动逐个修改链接，有两种实现方式：

1. 前端脚本自动加参数 #

写一段简单的JS脚本，页面加载时自动给所有CSS/JS链接追加版本参数，版本号统一管理就行。

示例代码：

<script>
  // 统一设置版本号，更新时改这里就行
  const ASSET_VERSION = 'v20240520';
  
  // 处理所有CSS链接
  document.querySelectorAll('link[rel="stylesheet"]').forEach(link => {
    const oldHref = link.getAttribute('href');
    link.setAttribute('href', `${oldHref}?v=${ASSET_VERSION}`);
  });
  
  // 处理所有JS脚本，排除当前这个控制脚本避免循环
  document.querySelectorAll('script[src]').forEach(script => {
    const oldSrc = script.getAttribute('src');
    if (!oldSrc.includes('version-script.js')) {
      script.setAttribute('src', `${oldSrc}?v=${ASSET_VERSION}`);
    }
  });
</script>

注意：把这段脚本放在所有CSS/JS链接的后面，或者包在DOMContentLoaded事件里，确保DOM加载完成后再执行。

2. 构建工具自动注入 #

如果用Webpack、Vite这类工具，直接配置插件就能自动给资源加参数。比如Vite的配置可以这么写：

export default {
  build: {
    rollupOptions: {
      output: {
        // 用哈希作为版本参数，也可以换成自定义版本号
        entryFileNames: '[name].js?v=[hash]',
        assetFileNames: '[name].css?v=[hash]'
      }
    }
  }
}

构建后HTML里的资源链接会自动带上版本参数，不用手动改。

二、文件名版本化（推荐，缓存更高效） #

直接给资源文件名加版本后缀（比如test1.css→test1.v20240520.css），这种方式缓存命中率更高，同样不用手动改链接，用下面的方法：

1. 构建工具自动处理（主流方案） #

Webpack或Vite都能自动生成带哈希的文件名，同时更新HTML里的引用：

• Webpack示例：配置contenthash自动生成版本，搭配HtmlWebpackPlugin更新HTML引用

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    assetModuleFilename: '[name].[contenthash][ext]',
    clean: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

• Vite示例：默认支持哈希命名，构建后自动替换HTML里的链接，配置如下：

export default {
  build: {
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        assetFileNames: '[name].[hash].css',
        entryFileNames: '[name].[hash].js'
      }
    }
  }
}

2. 小型项目无构建工具的脚本方案 #

如果不用构建工具，写个Node.js脚本批量处理文件名和HTML引用：

const fs = require('fs');
const path = require('path');

// 要更新的版本号
const version = 'v20240520';
const htmlFile = './index.html';

// 重命名CSS文件
fs.readdirSync('./').forEach(file => {
  if (file.endsWith('.css')) {
    const newFileName = file.replace('.css', `.${version}.css`);
    fs.renameSync(file, newFileName);
  }
});

// 重命名JS文件（排除当前脚本）
fs.readdirSync('./').forEach(file => {
  if (file.endsWith('.js') && file !== 'update-assets.js') {
    const newFileName = file.replace('.js', `.${version}.js`);
    fs.renameSync(file, newFileName);
  }
});

// 替换HTML里的资源引用
let htmlContent = fs.readFileSync(htmlFile, 'utf8');
htmlContent = htmlContent.replace(/(\.css)/g, `.${version}$1`);
htmlContent = htmlContent.replace(/(\.js)/g, `.${version}$1`);
fs.writeFileSync(htmlFile, htmlContent);

把脚本存为update-assets.js，每次更新版本时改version变量，运行node update-assets.js就能自动完成所有修改。

内容的提问来源于stack exchange，提问作者user10806781