Webpack → Vite: Câu chuyện di chuyển bundler
(engineering.ab180.co)Chia sẻ câu chuyện khi chuyển từ Webpack sang Vite sau 5 năm sử dụng kể từ khi ra mắt dịch vụ. Vẫn còn nhiều thiếu sót, nhưng nếu bạn thấy bài viết thú vị thì mình rất cảm kích.
Ưu điểm của Webpack và sự thay đổi của hệ sinh thái web
Webpack đã được phát triển và duy trì suốt 10 năm qua, với một hệ sinh thái được xây dựng rất hoàn chỉnh.
Nó cũng được dùng ở nhiều nơi như Create React App, và hỗ trợ nhiều trình duyệt bằng cách gói các module theo kiểu IIFE.
Tuy nhiên, trong 5 năm, các tính năng trong dịch vụ đã tăng gần gấp 3 lần, khiến thời gian build tăng lên và trải nghiệm phát triển trở nên tệ hơn. Đồng thời, cùng với sự phát triển của hệ sinh thái web, cũng đã có nhiều thay đổi như việc hỗ trợ ES Module.
Bundler + Native
Trong 1~2 năm gần đây, xu hướng tận dụng sức mạnh của Native để thực hiện bundling và transpiling bắt đầu nổi lên. Đã có những nỗ lực nhằm vượt qua giới hạn xử lý của JS vốn là single-thread.
Các đại diện tiêu biểu là esbuild dựa trên Golang và SWC dựa trên Rust.
Lần thử thứ nhất: bundling chỉ dùng esbuild
Khi đó, sau khi cân nhắc hệ sinh thái như độ ổn định và plugin, nhóm quyết định sử dụng một bundler dựa trên esbuild. Đồng thời cũng muốn kiểm tra hiệu năng của chính esbuild ở mức nào.
Sau khi cài package và chạy script build, bản build vốn mất khoảng 210 giây trước đó đã kết thúc chỉ trong 2.16 giây. Nó cho thấy tốc độ build nhanh hơn khoảng 100 lần.
Tuy nhiên, khi áp dụng Babel để dùng EmotionJS thì tốc độ lại chậm đi 10 lần.
Ngoài ra, esbuild không hỗ trợ HMR nên được đánh giá là khó sử dụng. Dù có thể tự triển khai HMR, nhưng nhóm cho rằng chi phí công sức cũng như chi phí bảo trì/vận hành/quản lý sẽ rất lớn.
Lần thử thứ hai: bundling bằng Vite
Khái niệm của Vite là tách riêng Dependencies và Source code.
Dependencies thì nội dung không thay đổi sau khi cài đặt nên được transpile trước bằng esbuild. Source code thì thay đổi thường xuyên nên được tải bằng ESM. Kết quả build được cache để có thể build khi phát triển nhanh hơn.
Việc di chuyển được tiến hành dễ dàng bằng cách dùng template do Vite cung cấp. Có một vài vấn đề phát sinh nhưng nhanh chóng được giải quyết, và cấu hình cũng trở nên ngắn gọn, súc tích hơn rất nhiều so với Webpack.
Kết quả của việc di chuyển bundler
Khi đo thời gian build trên Netlify, mức trung bình giảm từ 250 giây → 90 giây. Giảm xuống còn 36% so với trước đây.
Khi file cấu hình trở nên gọn hơn, các thành viên trong nhóm có thể dễ dàng tạo môi trường build tùy chỉnh dựa trên đó, từ đó nâng cao hiệu suất làm việc.
Để cải thiện hơn nữa, có thể thay thế bằng thư viện CSS-in-JS không phụ thuộc Babel và áp dụng Monorepo.
Về hệ sinh thái, nếu SWC trở nên ổn định thì có thể thay thế Babel, và TypeScript Type Checker cũng đang được port sang Native.
Bài học rút ra
- Ngay cả công việc trông lớn lao cũng có thể được giải quyết dễ dàng nếu chia nhỏ để thử nghiệm và thảo luận nhiều.
- Ngay cả những công cụ hiện đang được dùng rộng rãi cũng có thể nhanh chóng biến mất theo sự phát triển của hệ sinh thái.
- Khả năng tiếp cận tốt sẽ tạo ra một môi trường tốt.
3 bình luận
Tốc độ của esbuild thật đáng kinh ngạc.
Ngay trên trang chủ chính của esbuild cũng nhấn mạnh rằng nó nhanh hơn 10-100x, nên lúc đầu tôi còn nửa tin nửa ngờ, nhưng khi tận mắt thấy thì thực sự rất sốc!
Mình cũng thật sự rất mong thời đại đó sẽ đến! Chắc chắn việc phát triển sẽ trở nên dễ chịu hơn rất nhiều :)