Node.js Express中为静态JS文件追加动态GET参数触发浏览器缓存刷新

嘿，这个需求太常见了——解决浏览器静态资源缓存的问题嘛！我在Express项目里用过好几种方法，分享给你：

1. 模板引擎动态注入版本参数（最直接） #

如果你的HTML是通过Express模板引擎（比如EJS、Pug）渲染的，最简单的方式就是在渲染页面时把动态版本号传给模板，然后在引用JS的地方拼接参数。

步骤： #

• 首先计算版本值：可以是项目package.json的版本号、文件内容哈希（最精准，只有文件变化才更新），或者临时用时间戳（生产环境不推荐）
• 在Express路由里把版本号传给模板：

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

// 计算JS文件的MD5哈希值，取前8位作为版本号
function getFileHash(filePath) {
  const fileBuffer = fs.readFileSync(filePath);
  const hashSum = crypto.createHash('md5');
  hashSum.update(fileBuffer);
  return hashSum.digest('hex').slice(0, 8);
}

app.get('/', (req, res) => {
  const jsVersion = getFileHash('./public/assets/a.js');
  res.render('index', { jsVersion });
});

• 在模板（比如EJS）里引用JS时拼接参数：

<script src="/assets/a.js?v=<%= jsVersion %>"></script>

这样每次a.js内容变化，哈希值就会更新，浏览器就会请求新文件，不会复用旧缓存。

2. 自定义中间件拦截静态资源请求（自动映射） #

如果不想在模板里手动写参数，可以写个Express中间件，自动处理带版本参数的请求，把它映射到实际的静态文件。

实现代码： #

const express = require('express');
const app = express();

// 这里替换成你的动态版本值，比如从配置文件读取或计算文件哈希
const staticAssetVersion = 'your-dynamic-value';

// 先拦截带版本参数的静态资源请求
app.use('/assets', (req, res, next) => {
  // 针对JS文件，移除v参数后转发到实际文件
  if (req.query.v && req.path.endsWith('.js')) {
    delete req.query.v;
    req.url = req.path; // 重置URL为不带参数的路径
  }
  next();
});

// 再挂载静态资源目录
app.use('/assets', express.static('public/assets'));

同时，你需要确保页面里的JS引用统一带上?v=${staticAssetVersion}，可以通过全局变量注入或者模板统一管理。

3. 进阶：用构建工具生成哈希文件名（生产环境更推荐） #

虽然你问的是加GET参数，但生产环境更推荐直接给文件名加哈希（比如a.abc123.js），这种方式缓存策略更可靠——浏览器会把带哈希的文件永久缓存，只有文件名变化时才重新请求。

用Webpack或Vite这类工具很容易实现：

• 配置构建工具输出带内容哈希的文件名
• Express依然用express.static托管静态资源
• 构建后生成的index.html会自动引用带哈希的JS文件，完全不需要手动处理参数

这种方式比URL参数更干净，还能避免一些CDN缓存的潜在问题。

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