Vite 中的 import.meta.glob vs 动态导入：该用哪个？

在 Vite 项目里，import.meta.glob（glob 导入）和 动态导入 (import()) 都能按需引入模块，但它们的定位和实现机制不太一样：

---

1. import.meta.glob

• 用法：

  const modules = import.meta.glob('./pages/*.ts');

  • 返回一个对象，key 是匹配到的文件路径，value 是一个函数（懒加载）或模块对象（配合 eager: true）。
  • 支持 eager: true，会直接加载模块（同步），否则返回一个懒加载函数。
  • 只能在构建时静态分析的路径下使用，不能拼接变量。

• 应用场景：

  • 大量文件批量引入（如 views/ 下的路由、store/ 模块、Markdown 文章等）。
  • 自动化路由 / 自动化注册组件。
  • 按文件模式统一管理资源。

• 特点：

  • 静态分析：vite 会在构建时根据 glob 结果生成一个清单，不会漏文件。
  • 可批量：一次性处理多个文件。
  • 受限于路径：必须写死（或相对/绝对路径），不能动态拼接变量。

---

2. 动态导入 import()

• 用法：

  const module = await import(`./pages/${page}.ts`);

  • 返回一个 Promise，需要 await。
  • 运行时决定加载哪个模块。
  • 支持 变量拼接路径 ，但 Vite 构建时会做 预打包（code splitting） ，可能会生成多个 chunk。

• 应用场景：

  • 运行时才知道加载哪个文件（比如根据路由参数加载某个页面组件）。
  • 条件导入（某些场景才需要的模块）。
  • 大文件的按需加载，减少初始 bundle。

• 特点：

  • 运行时决定路径：比 glob 更灵活。
  • 懒加载为主：必须异步获取。
  • 会影响代码分割：不同参数可能打包成不同 chunk。

---

3. 对比总结

特性	import.meta.glob	动态导入 import()
加载方式	静态批量生成映射表，支持懒加载或 eager	运行时动态加载，异步返回
路径	需要写死 glob 模式	可拼接变量，灵活
Subpath imports	❌ 不支持（必须文件路径）	✅ 支持
用途	自动化批量导入	条件/变量驱动的懒加载
构建时优化	Vite 确定文件清单，利于 Tree-shaking	Vite 会做 chunk 拆分，可能生成多个 bundle
典型场景	路由自动生成、组件自动注册	按需路由加载、大型依赖的懒加载

---

👉 简单一句话：

• import.meta.glob = 静态、批量、自动收集文件，适合 固定目录下的批量路由/组件。
• import() = 灵活、运行时决定，适合 基于变量/条件的动态加载。