Giải thích về JavaScript Bundling
Bạn viết các ứng dụng React hoặc Angular bằng cách sử dụng nhiều tệp tin. Bạn có các component, service và thư viện. Cách tổ chức này giúp ích cho bạn.
Trình duyệt không quan tâm đến các thư mục của bạn. Nếu bạn tải 200 tệp, trình duyệt sẽ thực hiện 200 yêu cầu mạng. Điều này khiến ứng dụng của bạn bị chậm.
Các bundler giải quyết vấn đề này. Một bundler sẽ lấy mã nguồn, các lệnh import và các module của bạn, sau đó kết hợp chúng thành một hoặc một vài tệp nhỏ. Điều này giúp việc tải dữ liệu trở nên hiệu quả.
Các bundler hiện đại làm được nhiều việc hơn là chỉ kết hợp các tệp:
• Minification: Nó loại bỏ các khoảng trắng và chú thích thừa. Nó rút ngắn tên biến để làm cho các tệp nhỏ hơn. • Tree shaking: Nó loại bỏ những đoạn mã mà bạn không bao giờ sử dụng. Nó loại bỏ các hàm không dùng đến từ các thư viện. • Code splitting: Nó chia mã thành các phần nhỏ. Trình duyệt chỉ tải những gì người dùng cần ngay lúc này.
Các tệp nhỏ hơn giúp ứng dụng chạy nhanh hơn.
Có hai công cụ chính: Webpack và Vite.
Webpack đóng gói toàn bộ ứng dụng của bạn trước khi cung cấp nó. Điều này hoạt động tốt cho các dự án cũ (legacy projects) quy mô lớn. Nó linh hoạt nhưng có thể cảm thấy chậm trong các dự án lớn.
Vite là lựa chọn hiện đại. Trong quá trình phát triển, nó cung cấp các tệp trực tiếp. Nó chỉ cập nhật tệp mà bạn thay đổi. Điều này giúp việc cập nhật diễn ra tức thì. Đối với môi trường production, Vite sử dụng Rollup để tạo ra các bundle nhanh chóng.
So sánh:
Webpack:
- Tốc độ phát triển: Chậm hơn
- Cấu hình: Phức tạp
- Tốt nhất cho: Các dự án cũ quy mô lớn
Vite:
- Tốc độ phát triển: Nhanh
- Cấu hình: Đơn giản
- Tốt nhất cho: Các dự án hiện đại mới
Hãy sử dụng Vite cho các dự án mới.
Mọi bundler đều tuân theo ba bước:
- Xây dựng đồ thị phụ thuộc (dependency graph): Nó lập bản đồ cách mỗi tệp kết nối với các tệp khác.
- Chuyển đổi mã: Nó chuyển đổi TypeScript hoặc JSX thành JavaScript thuần.
- Xuất bundle: Nó kết hợp và thu nhỏ mọi thứ vào một thư mục để triển khai.
Giữ cho bundle của bạn gọn nhẹ với các bước sau:
• Lazy loading: Chỉ tải các component khi người dùng điều hướng đến chúng. • Partial imports: Đừng import toàn bộ một thư viện. Chỉ import hàm cụ thể mà bạn cần. • Analyze: Sử dụng các công cụ để xem cái gì đang chiếm dung lượng trong bundle của bạn. • Production builds: Luôn triển khai các bản build production. Các bản build development thường quá lớn.
Bundling giúp ứng dụng của bạn hoạt động tốt hơn bằng cách cung cấp cho trình duyệt ít tệp hơn và các tệp nhỏ hơn.
Nguồn: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p