Optimizing Our Build Times by Migrating from Webpack to Rspack

Yelp · 2026 · 3. Quy mô lớn · Độ khó: Trung bình — bài gốc

Bối cảnh

Monorepo front-end của Yelp lớn dần, tốc độ của Webpack thành nút thắt dù họ đã tối ưu alias và thử cache trên CI. Có nhiều bundler mới (Vite, Parcel, Rspack); Yelp chọn Rspack vì tương thích cấu hình Webpack: nhiều năm công cụ xây trên Webpack khó chép sang một cấu hình hoàn toàn khác như Vite.

Plugin tự viết chỉ cần đổi vài lời gọi API sang bản tương thích Rspack, không phải viết lại.
Cấu hình kiểu adapter: chép nguyên cấu hình Webpack rồi chỉ thay những giá trị/plugin không tương thích. Cấu hình gốc không bị đụng, mọi khác biệt hiện rõ, và hai cấu hình cùng sống trong lúc chuyển.
Chuyển dần: developer tự bật Rspack cho công cụ dev, và bật bundling bằng Rspack trên CI theo từng trang; xác minh bằng deployment preview trên production; sau khi các trang chính ổn thì đổi mặc định. Theo Yelp, monorepo làm việc này dễ hơn nhiều so với nhiều repo, và tránh được một PR sống lâu.
Tối ưu sau khi chuyển: riêng việc chuyển đã nhanh hơn khoảng 25% với build SSR đầy đủ. Codemod đổi star re-export trong barrel file sang named re-export; codemod đổi "import rồi export" sang re-export thật (bỏ được khoảng 30 giây). Persistent cache của Webpack chứa đường dẫn tuyệt đối nên không dùng được trên CI; cache của Rspack di chuyển được, cache ấm giảm tới 80% thời gian build.

Build tích hợp trung bình nhanh hơn khoảng 52%. Với Storybook, lớp Rsbuild (bộ mặc định dựng trên Rspack) lại thừa vì cấu hình của họ đã đầy đủ.

Đổi công cụ build giữ tương thích cấu hình cho phép chuyển từng phần và quay lui dễ (Migration không downtime); cache chỉ dùng chung được giữa máy khi không chứa đường dẫn tuyệt đối (CI và build ở quy mô lớn).

Khi đổi công cụ nền, chọn bản tương thích để chuyển dần trước, tối ưu sau.
Cấu hình adapter (gốc + phần khác biệt tường minh) giữ được hai đường song song mà không lệch.
Kiểm tra cache của công cụ có di chuyển được giữa máy không trước khi dựa vào nó ở CI.