Đơn giản hóa Vite

Các công cụ cũ như Webpack hoặc CRA hoạt động bằng cách đóng gói toàn bộ dự án của bạn trước. Chúng đọc mọi tệp và kết hợp chúng thành một tệp JavaScript lớn duy nhất. Cách này hiệu quả với các dự án nhỏ, nhưng sẽ thất bại với các dự án lớn có hàng nghìn module. Các gói bundle lớn mất vài giây hoặc thậm chí vài phút để xây dựng. Mỗi khi bạn lưu một tệp, công cụ sẽ phải xây dựng lại các phần lớn của gói bundle đó.

Vite hoạt động theo một cách khác. Các trình duyệt hiện đại hỗ trợ ES modules một cách tự nhiên. Vite không đóng gói mã nguồn của bạn trong quá trình phát triển. Nó chỉ cung cấp từng tệp dưới dạng một module riêng biệt khi trình duyệt yêu cầu.

Hãy tưởng tượng về một nhà hàng buffet. Đầu bếp nấu mọi món ăn trước khi cửa hàng mở cửa. Nếu bạn muốn thay đổi một chút thôi, đầu bếp cũng phải làm lại hầu hết các món trong buffet. Bạn phải chờ đợi rất lâu để có đồ ăn. Đó chính là cách Webpack hoạt động.

Bây giờ hãy nghĩ về một nhà hàng gọi món (à la carte). Cửa hàng mở cửa ngay lập tức. Bạn gọi một món. Đầu bếp chỉ chuẩn bị đúng món đó. Nếu lát nữa bạn muốn ăn tráng miệng, đầu bếp sẽ chỉ chuẩn bị món tráng miệng. Bạn không cần phải đợi nấu xong cả thực đơn. Đó chính là cách Vite hoạt động.

Vite sử dụng hai chiến lược khác nhau cho hai nhu cầu khác nhau:

Phát triển (vite dev)

  • Chiến lược: Cung cấp các module ESM gốc mà không cần đóng gói.
  • Tốc độ: Tức thì. Nó không phụ thuộc vào kích thước dự án.
  • Lý do: Các yêu cầu mạng cục bộ rất nhanh.

Sản xuất (vite build)

  • Chiến lược: Đóng gói mọi thứ bằng Rolldown.
  • Tốc độ: Phụ thuộc vào kích thước dự án.
  • Lý do: Hàng trăm tệp riêng biệt sẽ tạo ra quá nhiều yêu cầu HTTP đối với người dùng thực tế. Việc đóng gói giúp trang web cuối cùng chạy nhanh hơn cho họ.

Vite mang lại cho bạn tốc độ khi lập trình và hiệu suất khi triển khai.

Nguồn: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62