夜雨聆风Build 构建流程：从源码到产物的全链路
📖 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| resolve | ||
| load | ||
| transform | ||
| chunk | ||
| generate |
2.2 与 Rollup 的兼容性
Rolldown 设计目标：API 兼容 + 行为兼容
advancedChunksmanualChunks | ||
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-visualizerimport { 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开发 | 资讯·工具·教程·社区
📱 关注我们，获取更多移动开发技术干货
💬 加入社群，与全国开发者交流成长
❤️ 觉得有用？点个"在看"分享给更多人！
