Skip to content

Vite工作原理详解

1. 整体架构

NOTE

Vite采用双模式架构:

  • 开发环境:基于ESM的开发服务器
  • 生产环境:基于Rollup的构建工具
graph TD
    A[Vite] --> B[开发环境]
    A --> C[生产环境]
    
    B --> D[ESM动态导入]
    B --> E[按需编译]
    B --> F[热更新]
    
    C --> G[Rollup打包]
    C --> H[代码优化]
    C --> I[资源处理]
    
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:2px
    style C fill:#bbf,stroke:#333,stroke-width:2px

NOTE

架构图解释

  1. 开发环境特点

    • 利用浏览器原生ESM能力
    • 实现真正的按需加载
    • 提供即时的热更新
  2. 生产环境特点

    • 使用Rollup进行打包
    • 实现更好的浏览器兼容性
    • 优化资源加载性能

2. ESM构建原理

sequenceDiagram
    participant Browser as 浏览器
    participant Vite as Vite Server
    participant FS as 文件系统
    
    Browser->>Vite: 请求入口文件
    Vite->>FS: 读取源文件
    FS-->>Vite: 返回文件内容
    Vite->>Vite: 路径重写和转换
    Vite-->>Browser: 返回ES模块
    
    Browser->>Vite: 请求依赖模块
    Vite->>Vite: 检查缓存
    Vite->>FS: 按需编译
    FS-->>Browser: 返回编译后模块

IMPORTANT

ESM构建流程说明

  1. 初始请求

    • 浏览器请求入口文件
    • Vite服务器读取并处理文件
    • 返回处理后的ES模块
  2. 依赖加载

    • 浏览器解析发现依赖
    • 自动发起依赖请求
    • Vite按需编译返回

2.1 模块处理流程

IMPORTANT

Vite的模块处理分为三个阶段:

  1. 路径解析

    • 将源码中的导入路径转换为真实文件路径
    • 处理别名和环境变量
  2. 模块转换

    • 将非ESM模块转换为ESM
    • 处理各类资源(CSS、图片等)
  3. 依赖预构建

    • 将CommonJS/UMD转换为ESM
    • 合并零散模块

3. 按需编译机制

graph LR
    subgraph 源文件
        A[入口文件] --> B[依赖1]
        A --> C[依赖2]
        B --> D[子依赖1]
        C --> E[子依赖2]
    end
    
    subgraph 编译缓存
        F[缓存1]
        G[缓存2]
        H[缓存3]
    end
    
    B -.->|命中缓存| F
    C -.->|命中缓存| G
    D -.->|编译| H
    
    style A fill:#f9f
    style F fill:#bbf
    style G fill:#bbf
    style H fill:#bbf

TIP

按需编译说明

  1. 依赖关系

    • 从入口文件开始分析
    • 构建模块依赖图
    • 追踪动态导入
  2. 缓存机制

    • 优先使用缓存
    • 增量编译新模块
    • 提高编译效率

3.1 缓存策略

缓存类型存储位置持久化用途
内存缓存运行时内存热模块更新
文件缓存node_modules/.vite依赖预构建
ETags浏览器缓存HTTP缓存

4. 插件系统

flowchart TD
    A[Vite插件] --> B[构建插件]
    A --> C[开发服务器插件]
    
    B --> D[代码转换]
    B --> E[资源处理]
    B --> F[构建优化]
    
    C --> G[路由处理]
    C --> H[中间件]
    C --> I[HMR]
    
    style A fill:#f96
    style B fill:#9cf
    style C fill:#9cf

WARNING

插件系统解析

  1. 构建插件功能

    • 处理不同类型的资源
    • 转换代码格式
    • 优化构建过程
  2. 开发服务器插件功能

    • 提供开发服务器功能
    • 处理热更新
    • 支持中间件扩展

4.1 插件执行顺序

TIP

插件执行遵循以下规则:

  1. Pre插件

    javascript
    {
      enforce: 'pre',
      // 最先执行
    }
  2. Normal插件

    javascript
    {
      // 普通优先级
    }
  3. Post插件

    javascript
    {
      enforce: 'post',
      // 最后执行
    }

5. 性能优化

5.1 开发环境优化

graph TD
    A[开发环境优化] --> B[路由预加载]
    A --> C[模块缓存]
    A --> D[并行处理]
    
    B --> E[预测用户路由]
    C --> F[缓存编译结果]
    D --> G[多进程编译]
    
    style A fill:#f96
    style B fill:#9cf
    style C fill:#9cf
    style D fill:#9cf

NOTE

性能优化策略说明

  1. 预加载优化

    • 智能预测用户路由
    • 预加载可能用到的资源
    • 减少实际加载时间
  2. 缓存优化

    • 多级缓存策略
    • 编译结果持久化
    • 提高重复访问性能
  3. 并行处理

    • 利用多核处理能力
    • 并行编译提高效率
    • 优化大型项目构建

5.2 生产环境优化

WARNING

生产环境重点优化项:

  1. 代码分割

    • 路由级分割
    • 组件级分割
    • 动态导入
  2. 资源优化

    • 图片压缩
    • CSS提取
    • 代码压缩
  3. 缓存优化

    • 长期缓存
    • 内容hash
    • 预加载