前端构建工具的性能对决：Vite、Turbopack 与 Rspack 的编译速度横评

前端构建工具的性能对决Vite、Turbopack 与 Rspack 的编译速度横评一、测试环境与基准项目公平对比需要统一的测试环境。基准项目为一个中等规模的 React TypeScript 应用指标数值源文件数500TypeScript 文件380样式文件CSS/SCSS75图片/SVG 资源60第三方依赖React 18, Ant Design, Zustand, Axiosnode_modules 大小280MB测试机器MacBook Pro M2, 16GB RAM, macOS 14本次测试基于相同的源项目分别使用 Vite 5.4、Turbopack 和 Rspack 1.0 进行构建。测试维度涵盖冷启动、HMR 热更新及生产构建旨在通过统一标准得出客观的对比结论。二、冷启动速度对比冷启动是指清除所有缓存后的首次启动rm -rf node_modules/.cache后执行工具冷启动时间内存峰值备注Vite 5.42.8s420MB预构建依赖 1.2s 启动 1.6sTurbopack1.9s380MB无预构建步骤直接启动Rspack 1.02.1s350MB配置文件加载 0.3sWebpack 518.5s1.2GB作为基线对比Vite 的预构建esbuild 处理依赖是冷启动的主要耗时。Turbopack 和 Rspack 都是增量编译不需要预构建冷启动更快。三、HMR 热更新速度修改一个组件文件后的 HMR 响应时间// 修改文件src/components/ProductCard.tsx含 150 行代码 // 修改内容更改一个 className // Vite HMR: // 1. 文件变更检测50ms // 2. 模块图失效分析20ms // 3. 重新编译80msesbuild // 4. 浏览器更新30ms // 总计~180ms // Turbopack HMR: // 1. 增量编译35ms // 2. 模块更新推送25ms // 总计~60ms // Rspack HMR: // 1. 增量编译45ms // 2. HMR runtime 更新30ms // 总计~75ms工具HMR 延迟模块更新数评价Vite 5.4180ms1-3 个模块快但非最快Turbopack60ms1 个模块精确失效最快Rspack 1.075ms1-2 个模块接近最快Turbopack 的 HMR 优势来自更精确的依赖图增量计算——Webpack/Vite 可能使 3 个模块失效Turbopack 通常只需 1 个。四、生产构建性能生产构建vite build/next build/rspack build对比工具构建时间产物大小JS BundleCSS BundleVite (Rollup)45.2s1.8MB1.5MB120KBTurbopack (Next)32.1s1.7MB1.4MB110KBRspack18.7s1.6MB1.3MB105KBWebpack 589.3s1.9MB1.6MB130KBRspack 的生产构建优势来自 Rust 原生的 Code Splitting 和 Tree Shaking 实现。Vite 生产构建使用 RollupJavaScript成为瓶颈。Rspack 的 Tree Shaking 对比// rspack.config.js export default { mode: production, optimization: { sideEffects: true, // 启用副作用分析 usedExports: true, // 标记未使用的导出 concatenateModules: true, // Scope Hoisting minimize: true, minimizer: [new RspackSwcMinimizer()], // Rust 原生压缩 }, };选型建议选 Vite 如果项目已在使用 Vite迁移成本高依赖了大量 Rollup 插件Rspack 不兼容 Rollup 插件团队熟悉 esbuild/Rollup 生态选 Turbopack 如果使用 Next.js 14Turbopack 是 Next.js 的默认打包器需要极致的 HMR 速度大项目效果更明显接受使用 Webpack loader 兼容层部分 loader 可能不兼容选 Rspack 如果生产构建速度是核心痛点Rspack 构建最快需要与 Webpack 生态兼容loader 兼容性最好项目同时需要速度快和产物体积小迁移建议# 从 Webpack → Rspack 的最小改动 # 1. 安装 Rspack npm install rspack/core rspack/cli -D # 2. 重命名配置 mv webpack.config.js rspack.config.js # 3. 修改配置导入 # const webpack require(webpack) → const rspack require(rspack/core) # 4. 测试 npx rspack build五、总结冷启动Turbopack (1.9s) Rspack (2.1s) Vite (2.8s)。HMR 速度Turbopack (60ms) Rspack (75ms) Vite (180ms)。生产构建Rspack (18.7s) Turbopack (32.1s) Vite (45.2s)。选型核心看项目阶段开发体验优先选 Turbopack/HMR构建速度优先选 Rspack生态兼容优先选 Vite。三者都比 Webpack 快 5-10 倍迁移的 ROI 显著。