🚀 Vite 开发服务器缓存策略详解
Vite 的开发服务器（基于 Connect/Express 架构）采用了精细的缓存控制策略，旨在最大化开发体验——既保证热更新（HMR）的实时性，又优化静态资源加载效率。
🚀 设计哲学：开发环境禁用缓存
Vite 的核心理念之一是 “快速反馈”。为了保证：
- 修改代码后浏览器立即更新（HMR）
- 刷新页面时加载最新资源
- 避免因缓存导致“改了没生效”的困惑
因此，Vite 在开发模式下会主动设置响应头，阻止浏览器缓存任何由 dev server 提供的资源。
🔍 核心原则
Vite 区分对待不同类型资源，采用差异化的缓存策略：
| 资源类型 | 默认缓存策略 | 设计目的 |
|---|---|---|
| 源码模块 | Cache-Control: no-cache | 确保 HMR 实时生效，修改后立即更新 |
| 预构建依赖 | Cache-Control: max-age=31536000, immutable | 利用强缓存避免重复请求和构建，提升冷启动速度 |
| 代理资源 | Cache-Control: no-cache（被强制覆盖） | 防止浏览器缓存代理后的 API 响应，避免看到旧数据 |
🧠 工作机制剖析
1. 模块系统与虚拟文件系统 (Virtual File System)
Vite 将所有导入的模块视为 ES Module，并在开发环境中通过 HTTP 请求按需加载。每个模块都有一个唯一的 URL，例如：
GET /src/App.vue?t=1712345678901
其中 t= 参数是一个时间戳，用于破坏缓存指纹，确保每次重新加载时都能获取最新内容。
2. 预构建依赖 (node_modules)
对于第三方库（如 React、Vue 等），Vite 会预先将其转换为 ES 模块格式并存储在本地缓存目录中（.vite/deps）。这些预构建产物具有稳定的 URL 和内容哈希值，因此可以安全地启用长期缓存。
Cache-Control: max-age=31536000,immutable
💡
immutable表示该资源永远不会改变，浏览器无需再次验证。
3. 中间件顺序与响应头覆写
Vite 的中间件执行顺序如下（简化版）：
- 用户自定义中间件（如代理配置）
- Vite 内置中间件（负责模块解析、HMR 注入等）
- 最终响应发送前的钩子
这意味着即使你在代理中间件里设置了 Cache-Control: max-age=31536000，也会被后续的 Vite 内置中间件覆盖为 no-cache。
