- Ở giai đoạn đầu phát triển, thời gian build khoảng 30 giây nên vẫn chấp nhận được, nhưng khi dần bổ sung thêm tính năng thì thời gian build tăng lên tới 1 phút 10 giây
- Thời gian build dài làm chậm quá trình phát triển, kéo dài thời gian onboarding cho lập trình viên mới, và khiến khó duy trì sự tập trung trong công việc hằng ngày
Thử cải thiện thông qua hackathon
- Vào tháng 1, nhóm đã thu thập dữ liệu, viết đề xuất dự án hackathon, nâng cao hiểu biết về hệ thống build hiện tại và tìm cách profiling
- Toàn bộ quy trình build được profiling bằng OpenTelemetry và Jaeger
- Kết quả profiling cho thấy việc chạy Webpack/Rollup chiếm phần lớn thời gian build
- Phát hiện ra nhiều dependency nhỏ đang được build từng cái một, nên có nhiều cơ hội để xử lý song song
- Cũng xác nhận rằng ở giai đoạn đầu, một số tác vụ nóng mất nhiều thời gian hơn mức cần thiết, làm chậm phần còn lại của quy trình build
- Trong thời gian hackathon, nhóm tập trung rút ngắn thời gian bundling bằng esbuild
- Dùng esbuild làm loader cho Webpack/Rollup để cải thiện hiệu năng đáng kể (với Rollup là giảm 80%)
- Dùng esbuild như một bundler thay thế hoàn toàn Webpack/Rollup để giảm 90% thời gian bundling
- Kết quả dự án hackathon là thời gian build tiện ích mở rộng giảm hơn 70%, xuống còn khoảng 15 giây
Công việc để áp dụng vào production
- Dự án hackathon dùng khá nhiều giải pháp tạm thời, nên để đưa vào production cần thay bằng giải pháp thực sự
- Chuyển hoàn toàn từ Webpack và Rollup sang esbuild
- Hợp nhất quy trình build về một nơi
- Giải quyết các vấn đề xử lý graphic asset
- Thêm lại kiểm tra kiểu TypeScript vào quy trình build
- Kiểm thử build production và so sánh kích thước, chức năng
- Phản ánh các thay đổi trong dependency nội bộ
- Tái hiện các khía cạnh khác của hệ thống build cũ như bước build Sentry
- Bổ sung xử lý cho các trình duyệt không phải Chrome, polyfill, và yêu cầu build riêng theo từng store
- Công việc tập trung vào kiểm tra kiểu và tối ưu kích thước bundle production
Thêm kiểm tra kiểu vào esbuild
- Vì
tsc chậm nên khó sử dụng cùng quy trình build nhanh của esbuild
- Sử dụng plugin cộng đồng
esbuild-plugin-typecheck để chạy tsc trong worker thread và tận dụng incremental compilation
- Tự triển khai một plugin kiểm tra kiểu đơn giản để chạy song song các tiến trình CLI
tsc cho từng package root
- Chuyển các thông báo chẩn đoán biên dịch của
tsc sang định dạng native của esbuild để cải thiện khả năng đọc
- Dùng cờ
tsc --listFilesOnly và Metafile của esbuild để tự động xác minh rằng mọi input build đều đã được kiểm tra kiểu
Cải thiện kích thước bundle production
- Phân tích bundle production bằng công cụ phân tích kích thước bundle của esbuild
- Phát hiện vấn đề cả bản build ESM và CJS của thư viện UI component đều được đưa vào bundle
- Sửa cấu hình sai trong thư viện nội bộ để giảm kích thước bundle (3.3MB -> 2.1MB)
- Xác nhận hiệu quả giảm kích thước file trên nhiều entry point
Tác động và kết luận
- Khi triển khai vào production, thời gian warm build giảm hơn 90%, xuống còn khoảng 5 giây
- Ở chế độ watch, khi thay đổi file TypeScript có thể rebuild trong chưa đến 1 giây
- Các lập trình viên phản hồi rằng hiệu suất làm việc được cải thiện đáng kể nhờ hệ thống build mới
- Nhờ nỗ lực của đội QA và các lập trình viên tình nguyện, quá trình chuyển sang hệ thống build mới diễn ra suôn sẻ
- Kết quả khảo sát mức độ hài lòng của lập trình viên cho thấy mức không hài lòng về thời gian build giảm mạnh từ 97% xuống 5%
- esbuild là một công cụ tuyệt vời, và các dự án hackathon là môi trường lý tưởng cho kiểu công việc này
Chưa có bình luận nào.