Làm thế nào tôi giúp một dự án React doanh nghiệp lớn chạy nhanh gấp 5 lần
Giới thiệu
Trong thế giới phát triển ứng dụng web, tốc độ phát triển và hiệu suất của dự án là điều vô cùng quan trọng, đặc biệt là đối với các dự án lớn. Trong bài viết này, tôi sẽ chia sẻ về trải nghiệm của mình khi gia nhập một công ty lớn, nơi tôi đã phải làm việc với một dự án React doanh nghiệp khổng lồ và cách tôi đã cải thiện quy trình phát triển bằng cách thay thế Create React App (CRA) bằng Rsbuild.
Tóm tắt nội dung
TL;DR: Đừng sử dụng CRA cho các dự án lớn. Đối với các dự án nhỏ, hãy sử dụng Vite, nhưng cho các dự án doanh nghiệp lớn, Rsbuild là sự lựa chọn tốt nhất.
Bối cảnh
Sau ba tháng nghỉ ngơi sau khi tốt nghiệp, tôi đã gia nhập một công ty lớn chuyên về outsourcing. Sau một tuần tìm hiểu văn hóa công ty và các quy tắc lập trình, tôi nhận được nhiệm vụ đầu tiên: lập trình một màn hình theo tài liệu được cung cấp.
Dự án mà tôi làm việc là một dự án 'monorepo' React khổng lồ, bao gồm ít nhất bảy ứng dụng React nhỏ. Quá trình khởi chạy dự án này rất phức tạp và tốn thời gian, khiến tôi phải mất ba giờ chỉ để sao chép mã nguồn từ kho từ xa.
Cấu trúc dự án
main_app_1vàmain_app_2: Hai phần lớn của ứng dụng.libvàcommon: Sử dụng để chia sẻ mã giữa các ứng dụng.components: Bao gồm các thành phần và tính năng nâng cao dựa trênui_elements.- Tất cả các ứng dụng này được đưa vào
container, một dự án sử dụng CRA.
Quá trình phát triển ban đầu
Khi tôi khởi động dự án, tôi nhận ra rằng mỗi lần thay đổi mã, tôi phải chờ đợi tới 30 phút để thấy kết quả. Thời gian khởi động máy chủ phát triển cũng mất khoảng 5 phút, và file bundle.js rất lớn khiến trình duyệt mất thêm 2 phút để tải.
Vấn đề với quy trình biên dịch và CRA
Bottleneck từ tsc và CRA
Quy trình phát triển bị chậm do hai nguyên nhân chính: TypeScript Compiler (tsc) và Create React App (CRA). Mỗi lần chạy lệnh watch hoặc build, tôi phải chờ khoảng 10 phút cho quá trình hoàn tất. Điều này không chỉ khiến tôi cảm thấy nản lòng mà còn ảnh hưởng đến năng suất làm việc.
Giải pháp: Thay thế tsc bằng swc
Tôi quyết định tìm một giải pháp khác. Sau khi tìm hiểu, tôi đã tìm thấy swc, một công cụ biên dịch nhanh chóng. swc chỉ biên dịch TypeScript thành JavaScript mà không kiểm tra kiểu, giúp tiết kiệm thời gian đáng kể. Trong khi tsc mất 5-10 phút để biên dịch, swc chỉ mất 10 giây. Điều này đã giúp tôi cải thiện đáng kể thời gian phát triển.
Thay thế CRA bằng Vite
Khi xem xét thay thế CRA, tôi đã thử Vite. Chỉ cần ba bước đơn giản:
- Cài đặt Vite như một phụ thuộc.
- Tạo file
vite.config.tsvới plugin React. - Tạo file
index.htmlvới div#root.
Sau khi chuyển đổi thành công, tôi tiếp tục làm việc với dự án lớn. Tuy nhiên, khi khởi động máy chủ phát triển, tôi gặp lỗi liên quan đến biến môi trường.
Giải pháp cho các vấn đề với Vite
Thay đổi biến môi trường
Vite yêu cầu tất cả biến môi trường phải bắt đầu bằng VITE_, điều này khiến tôi phải thay đổi cách sử dụng biến môi trường trong mã nguồn. Thay vì sử dụng process.env, Vite sử dụng import.meta. Tôi đã tìm thấy một cách để xử lý vấn đề này mà không cần thay đổi quá nhiều mã nguồn.
Cải thiện tốc độ với Rsbuild
Khi tìm kiếm một giải pháp nhanh hơn, tôi phát hiện Rsbuild. Được thiết kế để thay thế các công cụ phát triển dựa trên Webpack như CRA, Rsbuild cho phép sử dụng trực tiếp các plugin của Webpack mà không gặp phải các vấn đề tương tự như CRA hay Vite. Sau khi cấu hình thành công, thời gian khởi động máy chủ phát triển chỉ còn 20-30 giây, và tốc độ HMR (Hot Module Replacement) cũng rất nhanh.
Kết luận
Qua trải nghiệm này, tôi nhận ra rằng việc cải thiện quy trình phát triển không chỉ giúp tiết kiệm thời gian mà còn nâng cao hiệu suất làm việc của cả đội ngũ phát triển. Mặc dù vẫn còn nhiều vấn đề tồn tại trong văn hóa doanh nghiệp, nhưng những cải tiến kỹ thuật có thể mang lại lợi ích to lớn.
Nếu bạn đang gặp khó khăn tương tự trong dự án của mình, hãy thử áp dụng những giải pháp mà tôi đã chia sẻ. Đừng ngần ngại khám phá các công cụ mới và tìm kiếm cách để tối ưu hóa quy trình làm việc của bạn.
Các mẹo và lưu ý
- Sử dụng các công cụ hiện đại: Luôn cập nhật và sử dụng các công cụ mới nhất để tối ưu hóa quy trình phát triển.
- Tìm hiểu về quy trình biên dịch: Hiểu rõ quy trình biên dịch sẽ giúp bạn phát hiện và xử lý các bottlenecks.
- Thực hiện kiểm tra hiệu suất thường xuyên: Đánh giá hiệu suất của dự án một cách định kỳ để phát hiện các vấn đề sớm.
Câu hỏi thường gặp
1. Tại sao nên tránh sử dụng CRA cho các dự án lớn?
CRA thường không tối ưu cho các dự án quy mô lớn với nhiều thành phần, làm chậm quá trình phát triển.
2. Rsbuild có đáng để thử không?
Có, Rsbuild cung cấp hiệu suất vượt trội và khả năng tương thích tốt với các plugin Webpack.
3. Làm thế nào để chuyển đổi từ CRA sang Vite hoặc Rsbuild?
Bạn chỉ cần thay đổi cấu hình và cài đặt các phụ thuộc cần thiết.
Hy vọng bài viết này sẽ giúp ích cho bạn trong quá trình phát triển dự án của mình. Hãy để lại ý kiến hoặc câu hỏi của bạn ở phần bình luận bên dưới!
