Experience

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
    • 预加载