一、背景概述
我们是 NetShort ------ 一家头部的出海短剧公司， 旗下产品netshort iOS 美区短剧类应用冲榜 App Store Top 3 ，在 Google Play 多个国家和地区的短剧类应用中也处于 前三名 。随着公司业务的高速扩展，特别是 ToB 方向的管理后台系统 需求不断激增，开发节奏极快，对前端工程化体系、构建效率、上线速度提出了更高要求。
当前系统架构采用的是传统 非微前端单体方案 ，构建工具使用的是 Vite ，整体体验虽轻量，但在 大体量项目场景下暴露了明显的性能瓶颈。
二、问题与挑战
1. 🐢 Jenkins 上构建耗时严重
- 当前构建流程基于 Jenkins Slave 环境完成，Vite 项目平均构建耗时 数分钟。
- 每次构建涉及大量依赖重新安装、无缓存命中，CI/CD 成为发布瓶颈。
- 在业务要求"分钟级"热修复上线的背景下，这种延迟 完全不可接受。
2. 🧱 构建规模过大，Vite 渐显吃力
- 当前系统代码量大，模块众多，打包逻辑复杂。
- Vite 原本适合中小型项目、单页应用，对大型项目的 Tree-shaking、依赖预构建支持不够完备。
- Vite 插件生态虽强，但在一些高级构建能力如缓存/并行构建/资源优化方面仍显局限。
3. 📦 技术债堆积，构建逻辑难以维护
- 项目非微前端架构，模块边界模糊，构建过程中副作用较多。
- Vite 插件配置繁复，自定义打包逻辑不易复用，影响团队协作与规范统一。
三、为什么是 Rsbuild？
Rsbuild 是由 现代.js Modern.js 团队推出的新一代构建工具 ，具备以下优势，天然契合当前的技术诉求： rsbuild.dev/zh/guide/st...
✅ 高性能构建引擎（基于 Rspack）
- 使用 Rust 编写的
Rspack内核，构建性能相比 Vite/Webpack 显著提升（官方数据：最高提升 10 倍以上）。 - 默认开启并行压缩、智能缓存、模块级别构建优化。
✅ 更强的 CI 构建能力
- 支持生产构建缓存（build cache）、避免重复构建相同模块。
- 更适合大型项目/复杂架构下的构建场景。
- 支持持续构建 + 增量构建，适配当前高速迭代需求。
✅ 更稳定的工程化体验
- 提供更清晰的打包策略与插件机制。
- 与 Vite/Webpack 插件生态兼容性良好。
- 支持渐进式接入，无需大规模重构。
🎯 迁移目标
| 目标 | 说明 |
|---|---|
| 🚀 提升构建速度 | 将 Jenkins 上构建耗时从"数分钟"压缩到"几十秒"甚至更低 |
| 🧩 提高稳定性 | 减少构建失败、避免重复打包、提升缓存命中率 |
| 🔧 简化构建维护 | 使用更结构化、更标准的构建工具取代自定义 Vite 脚本 |
| 🔄 支撑高频迭代 | 更好支持"热修复上线"、"分钟级紧急发版"的业务节奏 |
四、核心对比分析
| 维度 | ⚡ 冷启动速度 | 🔄 热更新速度 (HMR) | 🔨 打包构建速度 | 🧩 插件生态 |
|---|---|---|---|---|
| Vite | 极快，基于 esbuild，适合中小项目 |
极致快速，更新延迟极低 | 中等偏慢，rollup 单线程构建，体量越大越慢 |
丰富，生态活跃，社区插件成熟 |
| Rsbuild | 极快，基于 Rspack（Rust 多线程），大型项目更稳定 |
快，稍逊于 Vite，但满足日常开发需求 | 非常快，支持并行构建与缓存优化，适合大项目 | 插件机制完善，兼容 Webpack，稳定性更强 |
五、Rsbuild 为何更快（原理解析）
- Rust 多线程构建内核：Rsbuild 基于 Rspack，采用 Rust 编写，天然支持并行处理模块、资源压缩、chunk 拆分等工作，极大提升了构建吞吐量。
- 构建缓存机制默认启用：与 Vite 每次构建"从头开始"不同，Rsbuild 会自动缓存模块依赖图、构建产物、压缩结果等，大幅缩短重复构建时间，适合高频构建场景如 Jenkins。
- 更高效的 Tree-shaking 和转译优化：Rspack 对 TypeScript、JSX、Vue 等文件支持原生转译优化，避免 Babel 全流程处理，整体构建更轻量。
- 内置优化策略：默认启用 gzip 压缩、chunk 拆包、静态资源分析，无需依赖第三方插件即可获得最佳产物体积。
六、实际迁移效果评估
- 构建时间：从原来的 3-5 分钟压缩至 1分多钟，显著提升上线效率。
- 打包体积：默认配置下 chunk 拆分合理，资源压缩率更高，首屏加载时间缩短。
- 协作效率：构建体系统一后，插件配置更清晰，团队协作与问题定位更加高效。
- 未来可扩展性：为微前端改造、模块解耦打下工程基础。
七、具体迁移过程
1. 项目结构迁移
- 替换
vite.config.ts为rsbuild.config.ts - 清除 rollup 特有配置，统一使用 Rsbuild 的 output 语法
- 调整
main.ts入口写法，确保兼容性 - 这里仅仅是一小部分的依赖插件
2. 插件体系替换
| 功能 | Vite 插件 | Rsbuild 插件或等效配置 |
|---|---|---|
| Vue 支持 | 内置 + vue 插件 | @rsbuild/plugin-vue |
| SVG Sprite 图标 | 无 | rsbuild-plugin-svg-sprite-loader |
| Sass/Less 支持 | vite-plugin-sass |
@rsbuild/plugin-sass, @rsbuild/plugin-less |
| 自动引入组件/API | unplugin-* 系列 |
同样支持 webpack 插件，迁移无障碍 |
| gzip 压缩 | vite-plugin-compression |
使用 compression-webpack-plugin |
| 构建分析 | 手动装包 | 使用 webpack-bundle-analyzer |
3. 环境变量与 proxy 重构
- 使用
loadEnv和process.env.VITE_XXX兼容读取原有.env文件 server.proxy逻辑保持一致，仅路径匹配写法稍作调整
4. 输出配置替代 rollup
- 使用
output.filename、output.distPath精准控制生成结构 chunkFileNames替换为 hash 拆分结构由 Rsbuild 自动控制
5. 预编译与依赖优化
- 原
optimizeDeps.include改为 Rsbuild 的preBundle.deps.include - 结合 Rspack 提供的静态依赖分析，预构建更彻底
✅ 最终效果
基于 vite 的构建时间记录图
基于 rsbuild 的构建时间记录图
- 构建结构更清晰，便于维护
- 插件集成集中统一，团队协作效率提升
- 打包效率质变，RS 构建能力在大型项目中明显优于 vite
总体来说，Rsbuild 的迁移成本不高，兼容性好，性能收益非常可观。