Vite đã gây ồn ào trong cộng đồng frontend. Số lượt tải xuống trên npm đã tăng gấp bốn lần trong năm ngoái và nó ngày càng trở nên phổ biến.

Điều đầu tiên bạn đọc về Vite trên trang web của họ là họ có nghĩa là “nhanh chóng” trong tiếng Pháp. Vite hứa hẹn sẽ tăng hiệu suất đáng kể, vậy làm thế nào để Vite đạt được điều đó?

Webpack và các gói truyền thống khác hoạt động theo cách tiếp cận lâu đời là đọc tất cả mã nguồn của bạn và biên dịch nó thành một vài tệp JS.

Đã vài năm kể từ khi hỗ trợ cho ESM có sẵn trong tất cả các trình duyệt chính, vì vậy Vite đã thực hiện một cách tiếp cận khác. Nó cung cấp nguyên trạng mã nguồn của bạn vào trình duyệt của bạn và cho phép nó tự xử lý việc nhập các mô-đun. Điều này tăng tốc đáng kể quá trình xây dựng vì gói không còn cần thiết cho công việc phát triển.

Nhưng như mọi khi, có một nhược điểm.

Trình duyệt mất thời gian để giải quyết các mô-đun gốc. Mở một gói duy nhất nhanh hơn nhiều so với mở hàng trăm gói phụ thuộc. Vì vậy, hiệu suất thực sự khác nhau như thế nào? Tôi đã thực hiện một số dự án giả với số lượng tệp khác nhau để minh họa sự khác biệt về hiệu suất.

điểm chuẩn

Tôi đã tạo một tập lệnh tự động tạo một dự án sẵn sàng để xây dựng với Vite và Webpack, đồng thời tạo một số thành phần mô phỏng đặt trước được hiển thị trên một trang. Bạn có thể tìm thấy liên kết GitHub tại đây .

Tôi bắt đầu một dự án được tạo tự động npm startvà ghi lại hai chỉ số:

1. Thời gian xây dựng theo báo cáo của trình đóng gói.
2. Thời gian tải theo báo cáo của các công cụ dành cho nhà phát triển của Chrome.

Không có gì đáng ngạc nhiên khi các trình duyệt không được tạo ra để tìm nạp hàng nghìn tệp một cách hiệu quả trong vài giây. Bởi vì bạn thực sự không nên có 5000 tệp trong một gói JS.

Chia mã để giải cứu!

Trên thực tế, bạn nên tải mã JS khi bạn di chuyển, khi bạn cần. Đoạn ban đầu của bạn nên càng nhỏ càng tốt. Điều này thường được thực hiện thông qua định tuyến, khi một bộ định tuyến xử lý các mô-đun được tải chậm khi bạn điều hướng đến một tuyến đường cần chúng. Đọc thêm trong tài liệu React .

Với Vite và tính năng chia tách mã, trình duyệt của bạn sẽ chỉ tìm nạp các tệp JS theo lô nhỏ, dẫn đến hiệu suất tốt hơn nhiều.

Nhưng Webpack không quá xa như người ta nghĩ. Có sẵn từ 5.20, Webpack có thể trì hoãn việc biên dịch các mô-đun được nhập động. Với experiments.lazyCompilationtùy chọn cấu hình, hiệu suất bản dựng của bạn cũng có thể cải thiện đáng kể bằng cách chia mã.

Hãy điểm chuẩn sau đó!

Lần này, tôi đang sử dụng cùng các dự án được tạo tự động, nhưng hàng trăm thành phần đó hiện được tải một cách lười biếng, vì vậy đoạn ban đầu về cơ bản là một dự án gần như trống rỗng.

Đây là kết quả:

Đó là hình ảnh giống như chúng tôi đã có với 10 tệp trong dự án. Có một sự khác biệt dưới một giây, nhưng Vite giành chiến thắng ở đây. Điều đó không làm ai ngạc nhiên! Khi bạn lười tải hầu hết mọi thứ, thời gian xây dựng ban đầu của bạn sẽ càng nhỏ càng tốt. Và nếu bạn có thể giữ tất cả các khối của mình nhỏ một cách hợp lý, Vite sẽ tiếp tục mang lại cho bạn những lợi ích của việc xây dựng nhanh.

Sự kết luận

Nếu bạn có thể chia mã ứng dụng của mình và giữ cho các khối nhỏ, Vite sẽ giúp bạn tiết kiệm nửa giây ở đây và ở đó.

Nhưng Webpack không quá xa như người ta nghĩ, đáng chú ý là vì những đổi mới như lazyCompilationvà swc-loader. Nếu quá trình xây dựng Webpack của bạn mất hơn 30 giây, trước tiên bạn có thể muốn thử tối ưu hóa cấu hình của mình bằng các tùy chọn mới hơn này.

Webpack vẫn là một lựa chọn tốt nếu bạn muốn hỗ trợ rộng rãi hơn cho các trường hợp sử dụng ít người biết đến hoặc nếu khối gói ban đầu của bạn rất lớn và bạn không thể chia nhỏ nó.

Vite là cách tiếp cận hiện đại hơn, với thiết lập và cấu hình dễ dàng hơn nhiều cũng như hiệu suất tuyệt vời ngay lập tức.

Cuối cùng, nó luôn phụ thuộc vào bạn và nhu cầu của bạn!