TypeScript 中 Vite 怎么配置动态导入的预加载与预获取策略-js教程-PHP中文网

vite对动态导入原生支持preload和prefetch：默认对紧邻导航模块用modulepreload，对非紧急模块用prefetch；可通过await强制preload、事件回调降级prefetch，或配置build.modulepreload:false禁用。

typescript 中 vite 怎么配置动态导入的预加载与预获取策略

Vite 对动态导入（import()）的预加载（preload）和预获取（prefetch）有原生支持，不需要额外插件，但需要理解其默认行为并合理配置构建与运行时策略。

Vite 将 import('./module.ts') 编译为异步 chunk，并在构建时自动生成对应的 .js 文件。运行时触发该导入时：

默认使用 preload：对**紧邻当前导航或即将执行**的模块（如路由组件、关键功能模块），Vite 会在主资源加载后立即 <link rel="modulepreload">，确保快速可用；
对**非紧急但可能后续用到**的模块（如次要工具函数、备用 UI 组件），Vite 默认使用 prefetch（通过 <link rel="prefetch">），在浏览器空闲时低优先级加载；
是否启用 prefetch 受 build.modulePreload 和 build.rollupOptions.output.manualChunks 影响，但更关键的是你如何书写 import 表达式。

Vite 不提供类似 Webpack 的 /* webpackPrefetch: true */ 注释语法，但可通过以下方式干预：

下载

强制 preload：在 import 后立即 await（或链式调用），Vite 会识别为高优先级依赖，生成 modulepreload；
```
const mod = await import('./heavy-utils'); // → 触发 modulepreload
```
降级为 prefetch：延迟加载逻辑，或包裹在非立即执行的回调中（如 setTimeout、事件监听器内），Vite 通常将其归类为 prefetch；
```
button.addEventListener('click', async () => {
  const mod = await import('./admin-panel'); // → 更大概率走 prefetch
});
```

禁用 prefetch：在 vite.config.ts 中关闭自动预获取：

export default defineConfig({
  build: {
    modulePreload: false // 禁用所有自动生成的 modulepreload/prefetch
  }
});

虽然 Vite 本身不处理 TypeScript 类型预加载，但动态导入的类型推导依赖 tsconfig 配置。确保：

启用 "incremental": true 和 "composite": true，加快 IDE 和 tsc --watch 对动态模块的类型缓存；
使用 "references" 拆分子项目时，Vite 能按需重建引用模块，避免全量重解析；
避免在 files 中列出所有动态模块路径（不推荐），改用 include: ["src/**/*"] + 精确的 exclude（如 ["**/test/**", "**/legacy/**"]）平衡性能与覆盖。

Vite 提供了比裸 import() 更可控的机制 —— import.meta.glob，适用于批量模块管理：

配合 eager: true 可实现“预加载即执行”，适合插件系统或主题包：

const themes = import.meta.glob('./themes/*.ts', { eager: true });
// 所有主题模块在启动时加载并执行，不走异步流程

TypeScript 中 Vite 怎么配置动态导入的预加载与预获取策略