#Vite 依赖优化

#1. 面试题

Q: Vite 依赖优化除了预构建 CommonJS -> ESM，还有什么作用？

#2. 核心解答

除了 模块格式转换 (CJS -> ESM) 和 包合并 (Resolving Requests) 以减少 HTTP 请求，Vite 还对依赖构建结果进行 缓存优化 (Caching)。

#(1) 强缓存

Vite 将预构建的依赖存放在 node_modules/.vite 目录下，并会在浏览器请求这些依赖时，设置非常强势的 HTTP 响应头： Cache-Control: max-age=31536000, immutable 这意味着浏览器通过 HTTP 缓存机制，永远不需要再去请求这些没有变化的第三方库。即使你刷新页面 (F5)，甚至强刷 (Ctrl+F5)，浏览器也只会用本地缓存。极大提高了页面加载性能。

#(2) 智能失效

只有当以下情况发生时，Vite 会重新运行预构建，并 修改 import 路径中的 hash 值，从而强制浏览器请求新的文件：

1. package.json 中的 dependencies 或 devDependencies 列表变化。
2. Lock file (package-lock.json / yarn.lock / pnpm-lock.yaml) 变化。
3. vite.config.js 中的配置变化 (如 alias, define)。

#(3) 按需引用

Vite 支持按需引入深层文件：import { fn } from 'lodash/fp'. 这种写法在 Webpack 中通常会被解析为打包整个 lodash 库 (tree-shaking 可能会优化掉)。而在 Vite 中，Esbuild 会精确地定位到这个文件并进行预构建，确保只打包你需要的部分。

#3. 面试加分项

#Q: 手动强制重新构建？

如果遇到依赖更新了但还是用的旧缓存，你可以：

1. 删除 node_modules/.vite 目录。
2. 启动时加 --force 参数 (vite --force)。
3. 修改 vite.config.js 随便加个空行保存一下 (触发配置变更)。

#4. 总结

• Deps: CJS -> ESM.
• Header: max-age, immutable (Cache Forever).
• Hash: Invalidate cache via file name hash.
• Force: --force or remove cache dir.