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 sử dụng các component, service và thư viện.

Trình duyệt gặp khó khăn khi phải xử lý quá nhiều tệp tin. Việc tải 200 tệp đồng nghĩa với 200 yêu cầu mạng (network requests). Đ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. Chúng lấy mã nguồn và các phần import của bạn rồi 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. Chúng thực hiện các tác vụ sau:

  • Minification: Chúng loại bỏ các khoảng trắng và chú thích. Chúng rút ngắn tên biến để tiết kiệm dung lượng.
  • Tree shaking: Chúng loại bỏ những đoạn mã mà bạn không sử dụng.
  • Code splitting: Chúng chia mã thành các phần (chunks) nhỏ. Người dùng chỉ tải những gì họ cần.

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ó. Nó mạnh mẽ và linh hoạt. Nó có thể mang lại cảm giác chậm chạp trong các dự án lớn vì nó phải đóng gói lại mọi thứ mỗi khi có thay đổi.

Vite là một lựa chọn hiện đại. Nó cung cấp các tệp trực tiếp trong quá trình phát triển bằng cách sử dụng các ES modules nguyên bản. 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ì.

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 lớn cũ (legacy projects)

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:

  1. Xây dựng đồ thị phụ thuộc (dependency graph): Bundler lập bản đồ cách các tệp kết nối với nhau.
  2. Chuyển đổi mã: Nó chuyển đổi TypeScript hoặc JSX thành JavaScript thuần.
  3. Xuất bản đóng gói (bundle): Nó ghi các tệp cuối cùng vào một thư mục để triển khai (deployment).

Giữ cho bundle của bạn gọn nhẹ với các mẹo sau:

  • Lazy loading: Chỉ tải các component khi người dùng cần đến chúng.
  • Import cụ thể: Đừng import toàn bộ thư viện. Chỉ import những hàm cụ thể mà bạn sử dụng.
  • Phân tích bundle của bạn: Sử dụng các công cụ để xem tệp nào chiếm nhiều dung lượng nhất.
  • Sử dụng bản build production: Luôn triển khai các bản build production thay vì các bản build development.

Các bundler giúp ứng dụng của bạn nhanh hơn bằng cách cung cấp ít tệp hơn và dung lượng nhỏ hơn.

Nguồn: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p