文件导入

在 Vite 中静态资源都有两种构建方式，一种是打包成一个单文件，另一种是 base64 编码格式的文件。


Vite 中内置的优化方案:

静态资源体积 >= 4KB，则提取成单独的文件；
静态资源体积 < 4KB，则作为 base64 格式的字符串内联；

svg 格式的文件会打包成单独的文件


new URL(url, import.meta.url):

URL接口用于解析、构造、规范化和编码URL
(.href)一个字符串化器，它返回一个包含整个 URL 的字符串

这在现代浏览器中能够原生使用。实际上，Vite 并不需要在开发阶段处理这些代码


批量导入

Glob 导入:

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块

1
const modules = import.meta.glob('./dir/*.js')
1
2
3
4
5
// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js')
}

可以使用对象的 key 值来访问相应的模块，匹配到的文件默认是懒加载的，通过动态导入实现，


import.meta.globEager：

1
const modules = import.meta.globEager('./dir/*.js')
1
2
3
4
5
6
7
// vite 生成的代码
import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1
}

请注意：

  1. 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
  2. 该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）或一个别名路径
  3. 导入不接受变量，应直接传递字符串模式
  4. glob 模式不能包含与包裹引号相同的引号字符串（其中包括 '，"，`）