Rollup 生产构建原理

Vite 生产构建底层使用 Rollup，生成高度优化的产物。

Rollup 构建流程

1. 入口分析 → 扫描依赖 → 构建模块图
2. 依赖分析 → Tree Shaking → 标记导出
3. Chunk 分割 → 代码合并 → 生成产物
4. 资源处理 → 哈希命名 → 输出文件

模块图构建

// Rollup 分析入口依赖
import App from './App.vue'
import router from './router'
import { createStore } from 'pinia'

// 递归分析每个 import
// 构建完整依赖图

Tree Shaking 原理

// 源码
export function used() { }
export function unused() { }

// 代码中使用
import { used } from './utils'

// 构建后，unused 被移除
export function used() { }

注意：Tree Shaking 移除未使用的导出，减小产物体积。

Chunk 分割算法

Rollup 根据：

• 模块依赖关系
• 动态导入边界
• manualChunks 配置
• 入口共享分析

自动分割 chunk：

入口共享 → vendor chunk
动态导入 → 异步 chunk
配置分包 → 自定义 chunk

构建产物结构

dist/
├── index.html           # 入口
├── assets/
│   ├── index-[hash].js  # 入口 chunk
│   ├── vendor-[hash].js # 依赖 chunk
│   ├── lazy-[hash].js   # 懒加载 chunk
│   └── index-[hash].css # CSS 文件

Chunk 内容

Rollup vs Webpack

要点总结

• Rollup 构建模块图分析依赖
• Tree Shaking 移除未使用代码
• Chunk 分割基于依赖和配置
• 产物体积更小，ESM 输出