Tìm hiểu ViteJS (Phần 1)

Giới thiệu Vite:

ViteJS là công cụ tương tự webpack, Rollup, Parcel …

Mục đích của Vite là giải quyết những bài toán hiệu năng của các Javascript tool hiện tại.

Tốc độ khởi động server nhanh:

Vite cải thiện tốc độ khởi động của dev server bằng cách chia các modules thành 2 nhóm: dependencies và source code.

• Dependencies là hầu hết plain javascript không thay đổi trong quá trình dev. Một số dependencies lớn (ví dụ component libraries với hàng trăm modules) khá tốn kém để xử lý. Vite pre-bundles các dependencies này sử dụng esbuild. Esbuild viết bằng Go và pre-bundles nhanh gấp 10-100x các bundler khác dựa trên javasript.
• Source code chứa non-plain javascript cần chuyển đổi (ví dụ JSX, CSS, Vue …), và được edit thường xuyên. Tất cả source code không cần thiết phải load cùng lúc. Vite xử lý source code qua native ESM. Điều này cho phép trình duyệt đảm nhận 1 phần công việc bundler. Vite chỉ cần chuyển đổi và xử lý source code khi browser request nó. Code đằng sau import động chỉ được xử lý khi thật sự sử dụng trên màn hình hiện tại.

Tốc độ update nhanh:

Khi 1 file được chỉnh sửa trong hệ thống bundler-based, sẽ là không hiệu quả khi build lại toàn bộ bundle. Tốc độ update sẽ chậm lại khi dự án lớn lên. Ở 1 số bundler, dev server chạy bundling trong memory do vậy chỉ cần vô hiệu hóa 1 phần module graph khi 1 file thay đổi, nhưng nó vẫn cần cấu trúc lại toàn bộ bundle và reload web page. Cấu trúc lại bundle là tốn kém, và tải lại page sẽ làm mất trạng thái hiện tại của ứng dụng. Cho nên 1 số bundlers hỗ trợ Hot Module Replacement (HMR): cho phép 1 module có thể “hot replace” mà không ảnh hưởng đến toàn bộ page. Tuy nhiên thực tế tốc độ HMR cũng giảm đi đáng kể khi kích thước ứng dụng tăng lên.

Ở Vite, HMR được tối ưu qua ESM. Khi 1 file được edit, Vite chỉ cần vô hiệu hóa chính xác chuỗi giữa module đã chỉnh sửa và bound HMR gần nhất (hầu như chỉ là module đó), thực hiện update nhất quán nhanh chóng bất kể kích thước ứng dụng. Vite cũng tận dụng HTTP header để tăng tốc độ tải trang (bằng cách để trình duyệt hỗ trợ nhiều hơn nữa): module requests được thực hiện có điều kiện thông qua 304 Not Modified, các requests module dependency được cache qua Cache-Control: max-age=31536000, immutable vì vậy không cần truy cập server 1 lần nữa khi đã cache.

Plugin API của Vite hiện tại không tương thích với esbuild như 1 bundler. Mặc dù esbuild nhanh hơn, Vite sử dụng Rollup, vì nó cung cấp hiệu năng tốt hơn, linh hoạt hơn.

Tổng quan:

Vite là javascript build tool cung cấp giải pháp nhanh hơn, tinh gọn hơn trong phát triển ứng dụng web. Nó bao gồm 2 phần chính:

• Dev server cung cấp các tính năng cải tiến thông qua native ES modules, ví dụ Hot Module Replacement (HMR).
• Build command để đóng gói code với Rollup, cấu hình sẵn để tối ưu output các assets cho production.

Cài đặt và tạo dự án đầu tiên (xem phần 2).