⚡ Vite 冷启动优化

1. Vite 简介

2. 冷启动优化原理

关键优化点

1. 原生ES模块 - 浏览器直接加载源文件
2. 按需编译 - 只编译当前请求的文件
3. 依赖预构建 - 用 esbuild 预构建第三方依赖
4. 缓存策略 - 强缓存依赖，协商缓存源码

3. 核心架构

4. 原生ES模块（Native ESM）

工作原理

<!-- index.html -->
<script type="module" src="/src/main.js"></script>

<!-- main.js -->
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

浏览器直接加载 /src/main.js，Vite 拦截请求并实时编译

4.1 ESM vs 传统打包

5. 按需编译（On-Demand Compilation）

编译流程

1. 浏览器请求 /src/App.vue
2. Vite 拦截请求，调用 transformMiddleware
3. 通过 PluginContainer 执行插件链
4. 用 esbuild 编译 TypeScript/JSX
5. 用 @vitejs/plugin-vue 编译 Vue SFC
6. 返回编译后的 JavaScript

5.1 按需编译的优势

6. 依赖预构建（Dependency Pre-Bundling）

为什么需要预构建？

• CommonJS/UMD 兼容 - 转换为 ESM 格式
• 性能优化 - 合并小模块，减少请求数
• 缓存优化 - 依赖单独缓存，提升加载速度

# 预构建缓存位置
node_modules/.vite/deps/
├── vue.js
├── lodash.js
└── _metadata.json

6.1 预构建流程

7. esbuild 加速原理

esbuild 为什么这么快？

• 🦀 Go 语言 - 编译型语言，性能远超 JavaScript
• ⚡ 并行处理 - 充分利用多核 CPU
• 💾 内存高效 - 零拷贝、内存复用
• 📝 自定义解析器 - 不使用 AST，直接编译

7.1 esbuild 性能对比

7.2 esbuild 在 Vite 中的应用

应用场景

• 依赖预构建 - 将 CommonJS/UMD 转换为 ESM
• TypeScript 编译 - 快速编译 .ts/.tsx 文件
• JSX 转换 - 编译 JSX 语法
• 代码压缩 - 生产环境代码压缩

// vite.config.ts
export default {
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: `import React from 'react'`
  }
}

7.3 esbuild vs Babel

8. ViteDevServer 类

// packages/vite/src/node/server/index.ts
export interface ViteDevServer {
  // HTTP 服务器
  httpServer: http.Server | null
  
  // WebSocket 服务器（用于 HMR）
  ws: WebSocketServer
  
  // 模块图（依赖关系）
  moduleGraph: ModuleGraph
  
  // 插件容器
  plugins: Plugin[]
  
  // 配置对象
  config: ResolvedConfig
  
  // 核心方法
  transformRequest(url: string): Promise<TransformResult | null>
  transformIndexHtml(url: string, html: string): Promise<string>
  ssrLoadModule(url: string): Promise<unknown>
}

8.1 ViteDevServer 初始化流程

9. ModuleGraph 类

// packages/vite/src/node/server/mixedModuleGraph.ts
export class ModuleGraph {
  // URL → ModuleNode 映射
  urlToModuleMap = new Map<string, ModuleNode>()
  
  // 文件路径 → ModuleNode 映射
  fileToModulesMap = new Map<string, Set<ModuleNode>>()
  
  // 核心方法
  getModuleByUrl(url: string): ModuleNode | undefined
  getModulesByFile(file: string): Set<ModuleNode> | undefined
  onFileChange(file: string): void
  onFileDelete(file: string): void
  invalidateModule(mod: ModuleNode): void
}

9.1 ModuleNode 结构

export interface ModuleNode {
  // 模块 URL
  url: string
  
  // 文件绝对路径
  file: string | null
  
  // 模块类型
  type: 'js' | 'css' | 'html' | 'asset'
  
  // 导入的模块
  importers: Set<ModuleNode>
  
  // 被导入的模块
  importedModules: Set<ModuleNode>
  
  // 是否被 HMR 接受
  isSelfAccepting: boolean
  
  // 最后转换结果
  transformResult: TransformResult | null
  
  // HMR 时间戳
  lastHMRTimestamp: number
}

9.2 ModuleGraph 依赖追踪

9.3 HMR 边界计算

HMR 更新流程

1. 文件变化 → 触发 watcher
2. 查找对应的 ModuleNode
3. 递归向上查找 importers
4. 找到 HMR 边界（isSelfAccepting = true）
5. 发送 WebSocket 消息给浏览器
6. 浏览器执行 HMR 更新

10. PluginContainer 类

// packages/vite/src/node/server/pluginContainer.ts
export interface PluginContainer {
  // 解析模块 ID
  resolveId(id: string, importer?: string): Promise<ResolvedId | null>
  
  // 加载模块
  load(id: string): Promise<LoadResult | null>
  
  // 转换模块代码
  transform(code: string, id: string): Promise<TransformResult | null>
  
  // 触发钩子
  options(): Promise<RollupOptions | null>
  buildStart(): Promise<void>
  buildEnd(): Promise<void>
}

10.1 插件钩子执行顺序

10.2 Vite 内置插件

10.3 插件执行顺序

1. Pre 插件 - enforce: 'pre'
2. Vite 核心插件 - resolve, html, css, esbuild
3. 用户插件 - 无 enforce 配置
4. Vite 构建插件 - define, import-analysis
5. Post 插件 - enforce: 'post'

// 插件执行顺序示例
[
  { name: 'pre-plugin', enforce: 'pre' },
  { name: 'vite:resolve' },
  { name: 'user-plugin' },
  { name: 'vite:define' },
  { name: 'post-plugin', enforce: 'post' }
]

11. resolveConfig 函数

// packages/vite/src/node/config.ts
export async function resolveConfig(
  inlineConfig: InlineConfig,
  command: 'build' | 'serve',
  defaultMode = 'development'
): Promise<ResolvedConfig> {
  // 1. 加载配置文件
  const config = await loadConfigFromFile()
  
  // 2. 合并配置
  const resolved = mergeConfig(defaults, config, inlineConfig)
  
  // 3. 解析插件
  const plugins = await resolvePlugins(resolved)
  
  // 4. 解析环境变量
  const env = loadEnv(resolved.mode, resolved.envDir)
  
  // 5. 返回最终配置
  return { ...resolved, plugins, env }
}

11.1 配置加载流程

12. createServer 函数

// packages/vite/src/node/server/index.ts
export async function createServer(
  inlineConfig: InlineConfig = {}
): Promise<ViteDevServer> {
  // 1. 解析配置
  const config = await resolveConfig(inlineConfig, 'serve')
  
  // 2. 创建 HTTP 服务器
  const httpServer = await resolveHttpServer(config)
  
  // 3. 创建 WebSocket 服务器
  const ws = createWebSocketServer(httpServer, config)
  
  // 4. 创建模块图
  const moduleGraph = new ModuleGraph()
  
  // 5. 创建插件容器
  const container = await createPluginContainer(config)
  
  // 6. 注册中间件
  const middlewares = connect()
  middlewares.use(transformMiddleware(server))
  
  // 7. 返回服务器实例
  return { config, httpServer, ws, moduleGraph, plugins, ... }
}

12.1 中间件执行顺序

13. transformMiddleware

// packages/vite/src/node/server/middlewares/transform.ts
export function transformMiddleware(
  server: ViteDevServer
): Connect.NextHandleFunction {
  return async (req, res, next) => {
    // 1. 解析 URL
    const url = req.url!
    
    // 2. 判断是否需要转换
    if (isTransformable(url)) {
      // 3. 调用 transformRequest
      const result = await server.transformRequest(url)
      
      // 4. 返回编译后的代码
      res.setHeader('Content-Type', 'application/javascript')
      res.end(result.code)
    } else {
      next()
    }
  }
}

13.1 transformRequest 流程

async function transformRequest(
  url: string,
  server: ViteDevServer
): Promise<TransformResult> {
  // 1. 从模块图获取模块
  const mod = await server.moduleGraph.getModuleByUrl(url)
  
  // 2. 检查缓存
  if (mod?.transformResult && !isStale(mod)) {
    return mod.transformResult
  }
  
  // 3. 解析模块 ID
  const id = await server.pluginContainer.resolveId(url)
  
  // 4. 加载模块
  const loadResult = await server.pluginContainer.load(id)
  
  // 5. 转换代码
  const transformResult = await server.pluginContainer.transform(
    loadResult.code,
    id
  )
  
  // 6. 更新模块图
  mod.transformResult = transformResult
  
  return transformResult
}

13.2 缓存策略

缓存层次

• 依赖缓存 - node_modules/.vite/deps（强缓存）
• 模块缓存 - ModuleGraph.transformResult（内存缓存）
• HTTP 缓存 - 304 Not Modified（协商缓存）

// 依赖缓存示例
// 强缓存 1 年
Cache-Control: max-age=31536000, immutable

// 源码协商缓存
ETag: "xxx"
Last-Modified: "2026-03-13T04:00:00Z"

13.3 请求优化

优化手段

• ✅ 并发请求 - 浏览器原生支持 ESM 并发加载
• ✅ 请求合并 - 预构建依赖合并小模块
• ✅ 懒加载 - 只加载当前页面需要的模块
• ✅ 代码分割 - 动态 import 自动分割
• ✅ Tree Shaking - 生产环境移除未使用代码

14. 设计模式

核心设计模式

• 🎯 插件模式 - 灵活的插件架构
• 🔄 中间件模式 - Connect 中间件链
• 📊 观察者模式 - HMR 模块监听
• 🏭 工厂模式 - createServer, createPluginContainer
• 🎁 装饰器模式 - 插件增强模块转换

14.1 插件模式（Plugin Pattern）

// 自定义插件示例
export default function myPlugin(): Plugin {
  return {
    name: 'my-plugin',
    
    resolveId(id) {
      if (id === 'virtual:my-module') {
        return id
      }
    },
    
    load(id) {
      if (id === 'virtual:my-module') {
        return 'export default "Hello World"'
      }
    },
    
    transform(code, id) {
      if (id.endsWith('.vue')) {
        return transformVue(code)
      }
    }
  }
}

14.2 中间件模式（Middleware Pattern）

// 中间件链示例
const middlewares = connect()

middlewares.use(corsMiddleware())
middlewares.use(proxyMiddleware())
middlewares.use(transformMiddleware(server))
middlewares.use(serveStaticMiddleware())
middlewares.use(indexHtmlMiddleware())

// 每个中间件可以：
// 1. 处理请求并返回响应
// 2. 调用 next() 传递给下一个中间件

14.3 观察者模式（Observer Pattern）

// Chokidar 监听文件变化
const watcher = chokidar.watch(root, {
  ignored: ['**/node_modules/**', '**/.git/**']
})

watcher.on('change', (file) => {
  // 通知 ModuleGraph
  server.moduleGraph.onFileChange(file)
  
  // 触发 HMR
  const mods = server.moduleGraph.getModulesByFile(file)
  server.ws.send({
    type: 'update',
    updates: handleHMR(mods)
  })
})

14.4 工厂模式（Factory Pattern）

• createServer() - 创建开发服务器
• createPluginContainer() - 创建插件容器
• createWebSocketServer() - 创建 WebSocket 服务器
• createModuleGraph() - 创建模块图

// 工厂模式优势
const server = await createServer({
  root: process.cwd(),
  plugins: [vue(), react()]
})

// 封装复杂初始化逻辑
// 易于测试和扩展

15. 性能对比

15.1 真实项目案例

16. 最佳实践

配置优化

• ✅ 使用 esbuild - 开发环境默认启用
• ✅ 依赖预构建 - 自动优化第三方库
• ✅ 缓存策略 - 利用 HTTP 缓存
• ✅ 按需导入 - 使用动态 import
• ❌ 避免全量导入 - 不要 import 整个库

16.1 常见反模式

// ❌ 错误：全量导入
import _ from 'lodash'  // 70KB

// ✅ 正确：按需导入
import debounce from 'lodash/debounce'  // 2KB

// ❌ 错误：同步导入大模块
import hugeModule from './huge-module'

// ✅ 正确：动态导入
const hugeModule = await import('./huge-module')

// ❌ 错误：禁用依赖预构建
optimizeDeps: { exclude: ['vue'] }

// ✅ 正确：让 Vite 自动优化
// 不配置 optimizeDeps

16.2 依赖优化技巧

// vite.config.ts
export default {
  optimizeDeps: {
    // 预包含依赖
    include: ['vue', 'vue-router', 'pinia'],
    
    // 排除不需要预构建的包
    exclude: ['your-linked-package'],
    
    // 强制重新构建
    force: false
  }
}

16.3 生产环境优化

• ✅ 代码分割 - 自动分割代码块
• ✅ Tree Shaking - 移除未使用代码
• ✅ 压缩优化 - 压缩 JS/CSS/HTML
• ✅ CSS 代码分割 - 按需加载 CSS
• ✅ 资源优化 - 图片/字体压缩

16.4 调试技巧

# 启动调试模式
vite --debug

# 查看模块依赖
vite --force

# 分析打包结果
vite build --mode analysis

# 查看预构建依赖
vite optimize --force

17. 总结

关键要点

• ⚡ 原生ES模块 - 浏览器直接加载源文件
• 🔥 按需编译 - 只编译当前请求的文件
• 📦 依赖预构建 - esbuild 预构建第三方依赖
• 🚀 性能提升 - 冷启动快 100 倍，HMR 快 30 倍
• 🛠️ 插件生态 - 兼容 Rollup 插件

17.1 Vite 的未来

17.2 与其他工具对比

17.3 迁移到 Vite

迁移步骤

1. 安装 Vite 和相关插件
2. 转换配置文件（vite.config.ts）
3. 调整 import 路径（移除扩展名）
4. 替换 Webpack 特定语法
5. 测试和调试
6. 优化生产构建

17.4 社区生态

官方插件

• @vitejs/plugin-vue - Vue 3 支持
• @vitejs/plugin-react - React 支持
• @vitejs/plugin-legacy - 浏览器兼容

社区插件

• vite-plugin-pwa - PWA 支持
• vite-plugin-compression - Gzip/Brotli 压缩
• vite-plugin-imagemin - 图片压缩

📚 扩展阅读

• Vite 官方文档
• esbuild 官网
• Vite GitHub 仓库
• Rollup 官方文档