📖 Vite 深度系列 · 第 05 篇 | ⏱️ 阅读约 9 分钟

为什么同一个项目 Vite 构建比 Webpack 快 5-10 倍？Rolldown 带来了什么？代码分割策略怎么选？这篇把构建流程讲透。

一句话总结

Vite 8 构建流程 = Rolldown 统一引擎 + Oxc 编译压缩 + Lightning CSS 处理，Rust 工具链端到端打通，构建速度比 Rollup 快 10-30 倍，且行为与开发环境完全一致。

1. Build Pipeline 全景

vite build
  │
  ├─ 1. 配置解析
  │     ├─ 加载 vite.config.ts
  │     ├─ 合并 CLI 参数
  │     ├─ 解析 Environment 配置
  │     └─ 调用 configResolved 钩子
  │
  ├─ 2. 插件初始化
  │     ├─ 按 enforce 排序 (pre → normal → post)
  │     ├─ 调用 buildStart 钩子
  │     └─ 准备 Rolldown 插件适配
  │
  ├─ 3. 依赖解析
  │     ├─ 从入口(s)出发
  │     ├─ resolveId → load → transform
  │     ├─ 构建完整的依赖图
  │     └─ CSS/静态资源/HTML 分别处理
  │
  ├─ 4. 打包 (Rolldown)
  │     ├─ 代码分割 (chunk splitting)
  │     ├─ Tree-shaking
  │     ├─ CSS 提取与压缩 (Lightning CSS)
  │     └─ 静态资源处理 (hash + 内联)
  │
  ├─ 5. 压缩优化 (Oxc)
  │     ├─ JS 压缩 (Oxc minifier)
  │     ├─ CSS 压缩 (Lightning CSS)
  │     └─ HTML 压缩
  │
  ├─ 6. 产物输出
  │     ├─ 写入 dist/ 目录
  │     ├─ 生成 sourcemap
  │     ├─ 生成 manifest.json
  │     └─ 调用 writeBundle / closeBundle 钩子
  │
  └─ 7. 构建完成 ✓
        输出文件大小和耗时统计

2. Rolldown 构建详解

2.1 核心流程

resolve → load → transform → chunk → generate

2.2 与 Rollup 的兼容性

Rolldown 设计目标：API 兼容 + 行为兼容

3. 代码分割策略

3.1 自动分割

// 动态 import 自动创建 chunk
const AdminPanel = lazy(() => import('./AdminPanel.vue'))
const Dashboard = lazy(() => import('./Dashboard.vue'))

3.2 manualChunks（Vite 7）

// vite.config.ts (Vite 7)
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          ui: ['element-plus'],
          utils: ['lodash-es', 'dayjs']
        }
      }
    }
  }
})

3.3 advancedChunks（Vite 8）

Vite 8 引入 Rolldown 的 advancedChunks，更灵活的分组策略：

// vite.config.ts (Vite 8)
export default defineConfig({
  build: {
    rolldownOptions: {
      output: {
        advancedChunks: {
          groups: [
            {
              name: 'vendor',
              test: /node_modules/,
              minSize: 10000,  // 只拆分大于 10KB 的模块
              minShareCount: 2  // 被至少 2 个 chunk 共享
            },
            {
              name: 'framework',
              test: /vue|react|svelte/,
              minSize: 5000
            }
          ]
        }
      }
    }
  }
})

3.4 对比

4. CSS 处理管线

源码中的 CSS
  │
  ├─ .css 文件       → 直接处理
  ├─ .module.css     → CSS Modules
  ├─ .scss/.less     → 预处理器编译
  ├─ Vue SFC <style> → 提取后处理
  │
  ├─ PostCSS 处理
  │     ├─ Autoprefixer
  │     ├─ 自定义 PostCSS 插件
  │     └─ CSS Nesting 等
  │
  ├─ Lightning CSS
  │     ├─ 浏览器兼容降级
  │     ├─ CSS 压缩
  │     └─ 替代 cssnano
  │
  └─ 输出
        ├─ 开发：<style> 标签注入
        └─ 构建：提取为独立 CSS 文件

Vite 8 变化：Lightning CSS 从可选依赖变为默认依赖，开箱即用。

5. 静态资源处理

// 默认行为
import logo from './logo.png'     // → /assets/logo-abc123.png
import style from './style.css'   // → CSS 文件
import data from './data.json'    // → JSON 对象

// 内联为 base64（小于 4KB 默认内联）
import smallIcon from './icon.svg' // → data:image/svg+xml;base64,...

// 配置
export default defineConfig({
  build: {
    assetsInlineLimit: 4096,      // 内联阈值（字节）
    chunkSizeWarningLimit: 500,   // chunk 大小警告阈值
    cssCodeSplit: true,           // CSS 代码分割
    sourcemap: true,              // 生成 sourcemap
    rollupOptions: {              // Vite 7
      output: { assetFileNames: 'assets/[name]-[hash][extname]' }
    },
    rolldownOptions: {            // Vite 8
      output: { assetFileNames: 'assets/[name]-[hash][extname]' }
    }
  }
})

6. 构建产物分析

# 安装分析插件
npm i -D rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      filename: 'stats.html',
      gzipSize: true
    })
  ]
})

构建后自动打开可视化分析页面，可以看到每个 chunk 的模块组成和体积。

7. 真实项目构建性能

7.1 Vite 8 真实案例

7.2 优化 Checklist

8. 下期预告

下一篇我们将深入 Environment API：

• • 多运行时架构（client / ssr / worker / edge）
• • 如何利用 Environment API 构建全栈应用
• • Vite + Cloudflare Workers 实战

系列导航
← 04 HMR 热更新机制
→ 06 Environment API：Vite 的多运行时架构

💡 移动APP开发 | 资讯·工具·教程·社区
📱 关注我们，获取更多移动开发技术干货
💬 加入社群，与全国开发者交流成长
❤️ 觉得有用？点个"在看"分享给更多人！