Vite 中的 Import 打包机制详解

1. 静态导入

1.1 基础静态导入

javascript 复制代码

import App from './App.vue'
import './style.css'
import logo from './assets/logo.png'

Vite 会在构建时直接识别这些导入
所有静态导入都会被纳入依赖图
资源会被自动处理和优化

1.2 CSS 相关导入

javascript 复制代码

// 直接导入
import './style.css'
// CSS 模块导入
import styles from './style.module.css'
// 预处理器
import './style.scss'

CSS 文件会被解析并提取
其中的资源引用（图片、字体等）会被自动处理
支持 CSS Modules
预处理器需要安装相应依赖

2. 动态导入

2.1 基础动态导入

javascript 复制代码

// ✅ 支持的方式
import('./modules/foo.js')

// ✅ 简单变量路径
const modulePath = './modules/foo.js'
import(modulePath)

// ❌ 不支持的方式
// ❌ 这样是不行的
const name = getRandomName() // 完全动态的名称
import(`./modules/${name}.js`)

// ❌ 这样也是不行的
const userInput = getUserInput() // 用户输入的路径
import(userInput)

2.2 glob 导入

javascript 复制代码

// 导入所有模块
const modules = import.meta.glob('./modules/*.js')

// 导入并直接使用
const modules = import.meta.glob('./modules/*.js', { eager: true })

// 自定义导入查询
const modules = import.meta.glob('./modules/*.js', {
  import: 'setup',
  eager: true
})

3. 资源导入处理

3.1 图片资源

javascript 复制代码

// ✅ 推荐方式
import imgUrl from './img.png'

// ✅ URL 导入
// 注意事项：路径必须是相对路径（以 './' 或 '../' 开头）
const imgUrl = new URL('./img.png', import.meta.url).href

// ✅ 批量导入
const images = import.meta.glob('./assets/images/*.png')

// ❌ 不推荐
import(`./assets/${imageName}.png`) // 动态路径会导致问题

import.meta.url

js 复制代码

// import.meta.url 是 ES 模块的一个特性，它提供了当前模块的 URL 信息。
// 开发环境（Vite dev server）
import.meta.url 
// => "http://localhost:5173/src/main.js"

// 生产环境（构建后）
import.meta.url 
// => "https://your-site.com/assets/main.a1b2c3.js"

3.2 样式资源

javascript 复制代码

// ✅ 静态导入
import './style.css'

// ✅ 动态导入
if (condition) {
  import('./style.css')
}

// CSS 中的资源引用会被自动处理
// @font-face, url() 等都会被正确解析

4. 打包优化

4.1 代码分割

javascript 复制代码

// 自动代码分割
const UserModule = () => import('./features/user')

// 命名块
const AdminModule = () => import(/* webpackChunkName: "admin" */ './features/admin')

4.2 预加载

javascript 复制代码

// 声明预加载
<link rel="modulepreload" href="/src/app.js">

// 自动预加载
const component = () => import('./component.vue')

5. 常见问题和解决方案

5.1 动态路径问题

javascript 复制代码

// ❌ 问题代码
const getImage = (name) => import(`./assets/${name}.png`)

// ✅ 解决方案1：使用 glob
const images = import.meta.glob('./assets/*.png')
const getImage = (name) => images[`./assets/${name}.png`]

// ✅ 解决方案2：预定义路径映射
const imageMap = {
  logo: () => import('./assets/logo.png'),
  banner: () => import('./assets/banner.png')
}

5.2 条件导入

javascript 复制代码

// ✅ 支持的条件导入
if (condition) {
  await import('./feature.js')
}

// ✅ 环境判断
if (import.meta.env.DEV) {
  await import('./dev-only.js')
}

6. 性能优化建议

使用静态导入路径
合理使用动态导入实现代码分割
使用 glob 导入处理多文件场景
避免完全动态的导入路径
利用预加载提升性能

7. 构建时注意事项

所有静态资源都需要可被构建工具发现
动态导入需要有明确的路径范围
注意区分开发环境和生产环境的差异
合理使用环境变量和模式

在实际开发中，建议：

优先使用静态导入
需要动态导入时使用 glob 模式
避免完全动态的路径
注意资源引用的规范性

这样可以确保项目在开发和生产环境中都能正常运行，并且获得最佳的性能表现。