vue打包实现http缓存
实现 Vue 项目打包后的 HTTP 缓存
配置 Webpack 输出文件名哈希
在 vue.config.js 中配置 Webpack 的 output.filename 和 output.chunkFilename 使用哈希值。这样每次文件内容变化时，哈希值会改变，确保浏览器获取最新文件。
module.exports = {
configureWebpack: {
output: {
filename: '[name].[contenthash:8].js',
chunkFilename: '[name].[contenthash:8].js'
}
}
}设置静态资源缓存策略
在服务器配置中为静态资源设置长期缓存头。以下是 Nginx 的配置示例：
location / {
try_files $uri $uri/ /index.html;
expires 1y;
add_header Cache-Control "public, max-age=31536000, immutable";
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, max-age=31536000, immutable";
}使用 Service Worker 缓存
通过 workbox-webpack-plugin 实现更精细的缓存控制：
const { InjectManifest } = require('workbox-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new InjectManifest({
swSrc: './src/service-worker.js',
swDest: 'service-worker.js'
})
]
}
}配置 HTML 文件无缓存
确保 HTML 文件不被缓存，因为它是入口文件：
location = /index.html {
expires -1;
add_header Cache-Control "no-cache, no-store, must-revalidate";
}使用版本号控制缓存
在项目发布时增加版本号，强制客户端获取新资源：
// 在 main.js 中
const version = process.env.VERSION || '1.0.0'
localStorage.setItem('app_version', version)
// 检查版本更新
const oldVersion = localStorage.getItem('app_version')
if (oldVersion && oldVersion !== version) {
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
return caches.delete(cacheName)
})
)
})
}配置 CDN 缓存
如果使用 CDN，需要配置合适的缓存规则：
- 静态资源缓存时间设置为 1 年
- HTML 文件设置为不缓存或短时间缓存
- 启用自动刷新缓存功能
使用 ETag 验证
确保服务器配置了 ETag 或 Last-Modified 头，用于条件请求：
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
etag on;
}以上方法组合使用可以实现高效的 HTTP 缓存策略，同时确保用户总能获取到最新的应用版本。
