在 vite 项目中配置缓存策略，核心在于利用 @vitejs/plugin-react（或 vue 等对应插件）提供的 buildrollupoptions 钩子，向底层的 rollup 构建工具注入自定义的 output.assetfilenames 和 output.chunkfilenames 规则。通过将这些文件名模板设置为包含内容哈希（如 [hash]）的形式，vite 会在构建时生成带有唯一标识的文件名，从而让浏览器能够基于文件名进行长期缓存，而无需依赖复杂的 http 响应头配置。
Vite 如何修改输出文件名以启用强缓存？
Vite 默认使用 [name]-[hash].js 格式命名文件，这已经包含了哈希值。若要更精细地控制，例如区分静态资源和代码块，可以在 vite.config.js 中扩展 build.rollupOptions.output。具体做法是设置 assetFileNames 为 'assets/[name]-[hash][extname]'，这样所有非 JS/CSS 资源（如图片、字体）都会获得带哈希的文件名。同时，确保 chunkFileNames 也使用哈希，保证代码更新后文件名改变，触发浏览器重新下载。
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
output: {
// 静态资源：名称-哈希.扩展名
assetFileNames: 'assets/[name]-[hash][extname]',
// 代码块：名称-哈希.js
chunkFileNames: 'js/[name]-[hash].js',
// 入口文件：名称-哈希.js
entryFileNames: 'js/[name]-[hash].js'
}
}
}
});
运行 npx vite build 后，观察 dist 目录，你会发现生成的 .js 和 .png 文件都带有类似 -a1b2c3d4 的后缀。当这些文件部署到服务器并配置了 Cache-Control: max-age=31536000, immutable 时，浏览器会永久缓存它们，直到文件名变化。
如何处理 Vite 开发环境下的缓存问题？
开发环境中，Vite 使用 ESM 模块热替换（HMR），通常不涉及传统意义上的文件缓存，但浏览器可能会缓存旧的模块脚本。若遇到 HMR 不生效或显示旧代码，需检查浏览器开发者工具的“网络”面板，确保勾选了“禁用缓存”。此外，Vite 本身在开发模式下不会将文件写入磁盘，而是通过内存文件系统提供服务，因此不存在磁盘层面的缓存冲突。若需强制刷新，可使用快捷键 Shift + F5 或点击刷新按钮旁的硬刷新图标。
// 模拟一个简单的前端请求，验证缓存行为
fetch('/api/data')
.then(res => res.json())
.then(data => console.log('Data:', data));
在开发阶段，建议始终禁用浏览器缓存，以确保每次加载的都是最新代码。生产环境中，则依赖上述的文件名哈希策略和 HTTP 缓存头来实现高效缓存。
当 Vite 构建产物中的哈希未更新时，可能是什么原因？
如果构建后发现文件名中的哈希值与上次相同，即使源代码已修改，通常是因为 Vite 的内容哈希算法仅基于文件内容，而未检测到变更。这可能发生在以下情况：一是修改的代码未被正确导入或引用，导致实际构建的文件未变；二是使用了 rollupOptions.output.manualChunks 手动分割代码块，但未调整分割逻辑，导致某些 chunk 内容未变；三是缓存了旧的构建结果，未清理 dist 目录。解决方法是运行 npx vite build --clean 强制清理旧产物，并检查代码导入路径是否正确。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
