Đơn giản hóa Vite
Các công cụ cũ như Webpack hay Create React App hoạt động bằng cách đóng gói (bundle) toàn bộ dự án của bạn trước tiên. Công cụ này đọc mọi tệp và chuyển chúng thành một tệp JavaScript khổng lồ duy nhất. Cách này hiệu quả với các dự án nhỏ, nhưng sẽ gặp khó khăn với các dự án lớn. Trong các dự án lớn, quá trình này mất rất nhiều giây. Mỗi khi bạn lưu một tệp, công cụ phải thực hiện lại phần lớn công việc đó.
Vite hoạt động theo cách khác. Các trình duyệt hiện đại hỗ trợ ES modules một cách tự nhiên. Điều này có nghĩa là trình duyệt có thể tự xử lý các lệnh import và export. 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 tất cả các món ăn trước khi mở cửa. Nếu bạn muốn thay đổi một chút thôi, đầu bếp phải làm lại toàn bộ bữa buffet đó. Đây chính là cách Webpack hoạt động. Dự án càng lớn, bạn càng phải chờ đợi lâu hơn.
Vite giống như một nhà hàng gọi món (à la carte). Cửa mở 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 cho đến khi toàn bộ thực đơn sẵn sàng.
Vite sử dụng hai chiến lược khác nhau cho hai nhu cầu khác nhau:
Development (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 độ khởi động: Tức thì. Nó không phụ thuộc vào kích thước dự án. • Tại sao: Các yêu cầu HTTP cục bộ trên máy tính của bạn rất nhanh.
Production (vite build) • Chiến lược: Đóng gói mọi thứ bằng Rolldown. • Tốc độ khởi động: Thời gian tăng dần theo kích thước dự án. • Tại sao: Hàng trăm tệp riêng biệt sẽ gây ra quá nhiều yêu cầu HTTP cho người dùng. Việc đóng gói sẽ giải quyết vấn đề này.
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