Experience

Vite核心原理详解 ​

1. 基于ESM的开发服务器 ​

sequenceDiagram
    participant Browser as 浏览器
    participant Vite as Vite Server
    participant ESBuild as ESBuild
    participant Cache as 缓存层
    
    Browser->>Vite: 请求模块
    
    alt 首次请求
        Vite->>ESBuild: 预编译依赖
        ESBuild-->>Vite: 返回编译结果
        Vite->>Cache: 存入缓存
    else 命中缓存
        Vite->>Cache: 读取缓存
    end
    
    Vite-->>Browser: 返回ESM模块

NOTE

ESM工作原理：

  1. 浏览器发起模块请求
  2. Vite拦截请求并处理
  3. 按需编译并返回ESM模块
  4. 浏览器解析执行模块

2. 冷启动优化 ​

graph TD
    A[依赖预构建] --> B[ESBuild编译]
    B --> C[缓存结果]
    C --> D[重复使用]
    
    E[源码文件] --> F[按需编译]
    F --> G[协商缓存]
    
    style A fill:#f96
    style B fill:#9cf
    style E fill:#f96
    style F fill:#9cf

TIP

冷启动优化策略：

  1. 依赖预构建：

    • 使用ESBuild提前编译
    • 转换CommonJS为ESM
    • 性能提升10-100倍

  2. 缓存优化：

    • 源码使用协商缓存
    • 依赖使用强缓存
    • 减少重复编译

3. HMR实现机制 ​

flowchart TD
    A[文件变更] --> B{HMR处理}
    B -->|模块级更新| C[更新模块]
    B -->|样式更新| D[更新样式]
    B -->|完整更新| E[页面刷新]
    
    C --> F[状态保持]
    D --> F
    
    style A fill:#f96
    style B fill:#bbf
    style C fill:#9cf
    style D fill:#9cf

IMPORTANT

HMR工作流程：

  1. 变更检测：

    • 监听文件变化
    • 确定更新范围
    • 生成更新manifest

  2. 更新策略：

    • 模块热替换
    • 样式热更新
    • 状态保持

4. 生产环境构建 ​

graph LR
    subgraph 开发环境
        A[ESM] --> B[按需加载]
        B --> C[即时编译]
    end
    
    subgraph 生产环境
        D[Rollup] --> E[代码分割]
        E --> F[资源优化]
        F --> G[静态部署]
    end
    
    style A fill:#f96
    style D fill:#f96
    style G fill:#9cf

WARNING

构建策略对比：

  1. 开发环境：

    • 基于ESM的开发服务器
    • 实现按需编译
    • 提供即时反馈

  2. 生产环境：

    • 使用Rollup打包
    • 优化资源加载
    • 提供更好的兼容性

5. 缓存策略 ​

graph TD
    A[缓存策略] --> B[依赖缓存]
    A --> C[源码缓存]
    
    B --> D[强缓存]
    B --> E[预构建缓存]
    
    C --> F[协商缓存]
    C --> G[HMR缓存]
    
    style A fill:#f96
    style B fill:#9cf
    style C fill:#9cf

NOTE

多级缓存机制：

  1. 依赖缓存：

    • node_modules预构建
    • HTTP强缓存
    • 文件系统缓存

  2. 源码缓存：

    • 协商缓存
    • 增量编译
    • 内存缓存