在使用 Koa 框架搭建 Web 应用时，我们通常会使用 koa-static 中间件来处理静态文件。但是，经常会遇到静态文件缓存问题，即当静态文件内容发生变化时，浏览器仍然使用缓存的旧文件，导致页面显示不正确。本文将介绍如何解决这个问题。
什么是缓存？
缓存是指在客户端或服务器上存储的数据副本，以提高数据访问速度的技术。在 Web 应用中，浏览器会缓存静态文件，如图片、CSS、JS 等，以减少网络请求，提高页面加载速度。
静态文件缓存问题
静态文件缓存问题是指当静态文件内容发生变化时，浏览器仍然使用缓存的旧文件，导致页面显示不正确。这是因为浏览器在访问文件时会检查文件的修改时间，如果文件未被修改，则使用缓存的文件。
解决静态文件缓存问题
1. 添加版本号
添加版本号是一种简单有效的解决方法。在引用静态文件时，可以在文件名后面加上一个版本号，如style.css?v=1.0。当文件内容发生变化时，只需要修改版本号即可。这样浏览器会认为这是一个新的文件，从而重新请求文件并更新缓存。
// javascriptcn.com 代码示例
const Koa = require('koa');
const serve = require('koa-static');
const app = new Koa();
app.use(serve(__dirname + '/public', {
maxage: 365 * 24 * 60 * 60, // 设置缓存时间
index: 'index.html',
etag: false, // 禁用 etag
lastModified: false, // 禁用 lastModified
setHeaders: (res, path) => {
// 添加版本号
res.setHeader('Cache-Control', 'public, max-age=31536000');
res.setHeader('Expires', new Date(Date.now() + 31536000000).toUTCString());
}
}));
app.listen(3000);2. 设置 Cache-Control
Cache-Control 是一个 HTTP 头部字段，用于控制缓存行为。可以设置 max-age 参数来指定文件的缓存时间，如Cache-Control: max-age=3600，表示文件会被缓存 1 小时。当文件内容发生变化时，只需要修改 max-age 参数即可。
// javascriptcn.com 代码示例
const Koa = require('koa');
const serve = require('koa-static');
const app = new Koa();
app.use(serve(__dirname + '/public', {
maxage: 365 * 24 * 60 * 60, // 设置缓存时间
index: 'index.html',
etag: false, // 禁用 etag
lastModified: false, // 禁用 lastModified
setHeaders: (res, path) => {
// 设置 Cache-Control
res.setHeader('Cache-Control', 'public, max-age=31536000');
res.setHeader('Expires', new Date(Date.now() + 31536000000).toUTCString());
}
}));
app.listen(3000);3. 禁用 etag 和 lastModified
etag 和 lastModified 是两个用于检查文件是否修改的 HTTP 头部字段。禁用它们可以确保浏览器每次都请求新的文件，从而解决静态文件缓存问题。
// javascriptcn.com 代码示例
const Koa = require('koa');
const serve = require('koa-static');
const app = new Koa();
app.use(serve(__dirname + '/public', {
maxage: 365 * 24 * 60 * 60, // 设置缓存时间
index: 'index.html',
etag: false, // 禁用 etag
lastModified: false, // 禁用 lastModified
setHeaders: (res, path) => {
res.setHeader('Cache-Control', 'public, max-age=31536000');
res.setHeader('Expires', new Date(Date.now() + 31536000000).toUTCString());
}
}));
app.listen(3000);总结
静态文件缓存问题是 Web 应用开发中常见的问题，但是通过设置版本号、Cache-Control 和禁用 etag 和 lastModified 等方法可以有效地解决这个问题。在实际开发中，需要根据具体情况选择合适的解决方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6575d2bdd2f5e1655df1e48f