在前端开发中，我们经常需要为静态文件添加版本控制，以避免浏览器缓存导致的问题。本文将介绍如何在 Express.js 中为静态文件添加版本控制。
什么是静态文件版本控制
静态文件版本控制是指为静态文件（如 CSS、JavaScript、图片等）添加版本号或者时间戳等标识，以保证每次更新后浏览器可以重新加载最新的文件。这样可以避免浏览器缓存导致的问题，提高用户体验。
Express.js 中的静态文件处理
在 Express.js 中，我们可以使用 express.static 中间件来处理静态文件。该中间件可以将指定目录下的静态文件映射到一个 URL 路径上，如下所示：
app.use(express.static('public'))上述代码将会把 public 目录下的静态文件映射到 / 路径上。例如，public/css/style.css 可以通过 /css/style.css 来访问。
为静态文件添加版本控制
为了避免浏览器缓存导致的问题，我们需要为静态文件添加版本控制。一种常见的方式是在文件名中添加版本号或者时间戳。
添加版本号
我们可以为每个静态文件添加一个版本号，例如 style.123.css，其中 123 表示版本号。每次更新静态文件时，只需要改变版本号即可。
app.use(express.static('public', {
etag: false, // 禁用 etag，避免 304 Not Modified
setHeaders: (res, path) => {
if (path.endsWith('.css') || path.endsWith('.js')) {
const version = '123' // 版本号
res.setHeader('Cache-Control', 'public, max-age=31536000')
res.setHeader('Content-Type', 'text/css')
res.setHeader('Content-Encoding', 'gzip')
res.setHeader('Content-Length', '12345')
res.setHeader('ETag', version)
res.setHeader('Vary', 'Accept-Encoding')
}
}
}))上述代码中，我们使用了 setHeaders 参数来设置响应头，其中 ETag 表示版本号。每次更新静态文件时，只需要改变版本号即可。
添加时间戳
另一种方式是在文件名中添加时间戳，例如 style.20220101.css，其中 20220101 表示时间戳。每次更新静态文件时，只需要改变时间戳即可。
app.use(express.static('public', {
etag: false, // 禁用 etag，避免 304 Not Modified
setHeaders: (res, path) => {
if (path.endsWith('.css') || path.endsWith('.js')) {
const timestamp = Date.now() // 时间戳
res.setHeader('Cache-Control', 'public, max-age=31536000')
res.setHeader('Content-Type', 'text/css')
res.setHeader('Content-Encoding', 'gzip')
res.setHeader('Content-Length', '12345')
res.setHeader('ETag', timestamp)
res.setHeader('Vary', 'Accept-Encoding')
}
}
}))上述代码中，我们使用了 setHeaders 参数来设置响应头，其中 ETag 表示时间戳。每次更新静态文件时，只需要改变时间戳即可。
总结
静态文件版本控制是前端开发中的一个重要问题。在 Express.js 中，我们可以使用 express.static 中间件来处理静态文件，并通过设置响应头的方式为静态文件添加版本控制。本文介绍了添加版本号和时间戳两种方式，并给出了示例代码。需要注意的是，在生产环境中，应该启用 Gzip 压缩和缓存控制等优化措施，以提高网站性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bdb37badd4f0e0ff75b777