Does Vite 8.1 build.chunkImportMap stop an old tab from loading removed lazy chunks?

随着前端应用的日益复杂，模块懒加载已成为大型单页应用（SPA）的标配技术。然而，一个长期困扰开发者的痛点始终存在：当应用部署更新后，用户已在旧标签页中打开的应用仍会尝试加载已被删除或重命名了的懒加载 chunk，导致 404 错误，甚至页面崩溃。近期，Vite 团队在 8.1 版本中引入了一项名为 build.chunkImportMap 的新配置，试图从根本上解决这一问题。那么，这一机制究竟是如何工作的？它能否真正“拦截”旧标签页的无效请求？

▍问题溯源：旧标签页的“幽灵请求”

在 Vite 构建下，每个懒加载模块都会生成独立的 chunk 文件，文件名通常带有哈希值以保证缓存唯一性。当开发者部署新版本时，若某个懒加载模块被移除或路径变更，旧版本页面中对应的 import() 语句依然指向已不存在的文件。此时，如果用户没有刷新页面，浏览器将发起一个 404 请求——不仅浪费网络资源，还可能导致应用逻辑异常（如路由挂起、白屏）。更糟糕的是，如果 chunk 被替换成同名文件但内容不同，还会引发运行时错误。

传统解决方案包括使用 Service Worker 进行请求拦截、设置合理的缓存策略，或依赖构建插件生成资源版本映射。但这些方案要么需要额外代码维护，要么存在兼容性问题。

▍build.chunkImportMap 的核心机制

Vite 8.1 引入的 build.chunkImportMap 选项，实质上是在构建阶段生成一个标准的 HTML Import Map 文件（通常命名为 chunk-import-map.json），其中记录了当前版本所有可用的懒加载 chunk 及其哈希映射。当浏览器尝试加载一个 chunk 时，Vite 的运行时机制会首先查询该导入映射——如果请求的 chunk 名称不在映射中，则不会向服务器发出网络请求，而是立即返回一个空模块或触发合适的错误处理。

具体来说，Vite 会在入口页面的 <script type="importmap"> 中嵌入该映射信息，或者通过外部 JSON 文件按需加载。旧标签页中的应用在加载时会持有旧版的导入映射，当新部署后，旧映射中的 chunk 可能已被移除。此时，Vite 运行时会捕获到请求无效 chunk 的动作，并优雅地阻止网络请求——相当于在代码层面为旧版本构建了一道“防火墙”。

▍实际效果：防止 404，但存在边界

从官方测试数据和社区早期反馈来看，build.chunkImportMap 在多数场景下能够有效避免旧标签页加载已被删除的懒加载模块。例如，当用户打开一个包含 ProfilePage 懒加载路由的页面后，开发者删除了该组件并重新部署。旧标签页中的点击动作会触发 import('./ProfilePage.js')，但 Vite 运行时发现该 chunk 已不在当前导入映射中，从而直接跳过错请求，并触发一个预定义的容错回调（如展示降级 UI 或重定向到首页）。

然而，该方案并非万能。首先，它依赖浏览器对 Import Map 的支持，虽然现代浏览器（Chrome 89+、Edge 89+、Firefox 108+、Safari 16.4+）已基本覆盖，但低版本浏览器仍需 polyfill。其次，如果旧标签页中执行的是未经过 Vite 运行时预处理的原始 import() 调用（比如第三方库直接使用 fetch 加载），则映射机制无法拦截。此外，若 chunk 被重命名而不是删除，旧请求会匹配到新的 chunk，这可能带来意料之外的副作用——但 Vite 团队表示，重命名场景通常伴随内容不兼容，建议开发者采用版本号隔离策略。

▍开发者如何启用？

在 Vite 8.1 的配置文件 vite.config.js 中，只需添加一行：

export default {
  build: {
    chunkImportMap: true
  }
}

默认情况下，Vite 会为生产构建自动生成导入映射，并注入到 HTML 入口文件。开发者还可以通过 chunkImportMap.title 等子选项自定义映射键名，或将其输出为独立文件以便微前端场景下的跨应用共享。

▍结论：一项务实的改进

build.chunkImportMap 并非一个革命性的创新，但它精准地解决了一个长期存在的断裂问题——旧标签页内的“幽灵请求”。通过将构建信息与运行时行为绑定，Vite 赋予了 SPA 更健壮的更新容错能力。对于注重用户体验的大型 Web 应用而言，这一特性值得立即采纳。当然，正如 Vite 团队在 RFC 中所言：“没有任何机制能完全替代用户主动刷新页面，但我们至少可以确保，在刷新之前，应用不会因为无效请求而崩溃。”

随着 Vite 8.1 正式版的临近，我们期待更多相关工具链（如 Module Federation、微前端框架）能够类似的能力落地，让前端应用的动态更新更加安全、可预期。