为什么要用 import.meta.glob 加载 SVG 图标库

文章目录

• • [1. 先看：不用它，你要怎么写？](#1. 先看：不用它，你要怎么写？)
  • [2. 用 `import.meta.glob` 后：一行搞定](#2. 用 import.meta.glob 后：一行搞定)
  • [3. 核心：为什么必须用 `meta.glob`？](#3. 核心：为什么必须用 meta.glob？)
  • • [✅ 1. **批量导入文件**（最核心用途）](#✅ 1. 批量导入文件（最核心用途）)
    • [✅ 2. **Vite 编译时静态分析**](#✅ 2. Vite 编译时静态分析)
    • [✅ 3. **支持通配符**](#✅ 3. 支持通配符)
    • [✅ 4. **懒加载优化性能**](#✅ 4. 懒加载优化性能)
  • [4. 完整实用用法（你项目里真实会用的）](#4. 完整实用用法（你项目里真实会用的）)
  • [5. 一句话总结](#5. 一句话总结)
  • • 总结

为什么要用 import.meta.glob 加载 SVG 图标库呢? 看到的这段代码 import.meta.glob('../../../assets/icons/svg/*.svg') ，是 Vite 专属的静态资源批量导入语法 ，核心作用是：一次性自动导入指定目录下的所有匹配文件 ，不用手动一个个写 import。

我给你用最通俗、最清晰的方式讲透它的作用、优势和原理👇

---

1. 先看：不用它，你要怎么写？

如果不用 import.meta.glob，你想加载 10 个 SVG 图标，必须手动逐个导入：

// 手动导入，麻烦到爆炸
import icon1 from '../../../assets/icons/svg/user.svg'
import icon2 from '../../../assets/icons/svg/home.svg'
import icon3 from '../../../assets/icons/svg/setting.svg'
// ... 几十个图标要写几十行

缺点：

• 新增/删除图标时，必须手动改代码
• 代码冗余、易出错
• 无法动态匹配文件

---

2. 用 import.meta.glob 后：一行搞定

// 自动匹配目录下所有 .svg 文件
const modules = import.meta.glob('../../../assets/icons/svg/*.svg')

它会自动做这些事：

1. 扫描指定目录
2. 匹配所有 .svg 后缀文件
3. 生成一个文件路径 → 模块的映射对象
4. 支持懒加载 （默认）或全量导入

最终得到的 modules 长这样：

{
  "../../../assets/icons/svg/user.svg": () => import("./user.svg"),
  "../../../assets/icons/svg/home.svg": () => import("./home.svg"),
  // ...所有文件自动生成
}

---

3. 核心：为什么必须用 meta.glob？

✅ 1. 批量导入文件（最核心用途）

专门用来加载图标、图片、markdown、组件 等批量静态资源，尤其适合图标库。

✅ 2. Vite 编译时静态分析

import.meta.glob 是 Vite 在编译阶段执行的，不是运行时。

• 打包时会自动处理路径
• 生产环境会正确替换资源 URL
• 支持热更新（新增图标自动生效）

✅ 3. 支持通配符

• *.svg：当前目录所有 SVG
• **/*.svg：递归所有子目录
• 比手动导入灵活 100 倍

✅ 4. 懒加载优化性能

默认是懒加载（用到时才加载），不会一次性加载所有图标，提升页面速度。

---

4. 完整实用用法（你项目里真实会用的）

// 批量导入所有 SVG（ eager: true 表示立即加载，不懒加载 ）
const iconModules = import.meta.glob('../../../assets/icons/svg/*.svg', { eager: true })

// 处理成图标名: 路径 的格式
const icons = {}
for (const path in iconModules) {
  const iconName = path.split('/').pop().replace('.svg', '')
  icons[iconName] = iconModules[path].default
}

// 直接使用：icons.home、icons.user、icons.setting...
export default icons

---

5. 一句话总结

import.meta.glob = Vite 提供的「批量文件自动导入工具」

专门解决：静态资源太多、手动导入太麻烦、新增文件要改代码 的问题。

---

总结

• 不用它：手动一个个 import，繁琐易错
• 用它：一行代码批量导入所有 SVG，自动更新、编译优化
• 适用场景：图标库、批量图片、多语言文件、markdown 文档等