Vite - Vi vu theo em

Có bao giờ bạn phải giờ chờ hàng phút để project build xong và start được server?

Bạn bắt đầu tìm hiểu và nhận ra có điều gì đó nặng nè bên trong file bundle mà Webpack build ra. Project của càng to (nhiều dependency), file bundle của bạn càng bự, và tất nhiên điều này làm tăng thời gian build cũng như thời gian để web bạn load xong. Mình đã tự hỏi lòng tìm một con đường mới hơn, và giờ mình đã tìm thấy Vite.

Vite là gì?

Trong tiếng Pháp nghĩa là "nhanh" và được phát âm là /vit/. 😁

Vite là một cái tool để build web application, hay còn gọi là build tool 😁. Về cơ bản, nó giống như Webpack, nhưng giải pháp mà nó mang lại nhanh, gọn và lẹ hơn nhiều so với Webpack.

Vite được tạo ra bởi Evan You, người đã tạo ra Vue. Nhưng Vite không chỉ support Vue mà còn support React và 1 số framework khác.

Vite bao gồm 2 phần chính?

Dev server là 1 cái server dành cho môi trường development, có hỗ trợ hot reloading với Hot Module Replacement - HMR. (tương tự webpack-dev-server)

Build command là 1 cái command giúp bundle code sử dụng Rollup, pre-configured và optimize các static asset sử dụng cho môi trường production.

Vậy Vite hay hơn Webpack chỗ nào?

Webpack nói riêng và các "bundler" truyền thống nói chung có 1 vấn đề muôn thuở đó là phải re-bundle lại tất cả source mỗi khi chúng ta update hay save lại code. Điều này lý giải cho việc project càng có nhiều module / dependency thì càng tốn nhiều thời gian để build cũng như thực hiện hot reload.

Vite có lối tiếp cận khác, nếu không muốn nói là ngược lại so với phương thức truyền thống. Thay vì chờ bundle tất cả xong rồi mới start server, thì anh Vite này cho start server luôn ngây khi bắt đầu.

Vite phân ra 2 loại module trong application:

Dependencies: những thư viện, node package mà chúng ta tích hợp vào app, được build theo dạng ESM hoặc CommonJS (React), một vài dependency nặng nề vì chứa nhiều modules bên trong có thể làm giảm performance. Do các dependencies không thường thay đổi nên anh Vite sẽ pre-bundle đám này lại sử dụng esbuild.

Dành cho các bạn nào chưa biết thì esbuild được giới thiệu là 1 cái library bundle bao nhanh, có thể nhanh hơn 10 → 100 lần so với cái based javascript bundler bình thường 😋😋😋

Source Code: chính là code của chúng ta nè, thường thì không được viết bằng javascript thuần, mà có thể là JSX, CSS, TSX,... và tất nhiên là chúng ta sẽ thay đổi thường xuyên rồi (Vì có làm thì mới có ăn). Ở dạng này, Vite sẽ chỉ build và serve những module nào được request thôi (route based code-splitting).

Tương tự với HMR, Vite cũng sẽ track và re-bundle những file/module được edit dựa vào dependency graph.

Sau cùng, Vite sẽ deliver source code dựa vào cơ chế Native ESM được hỗ trợ trên browser.

Tạo 1 React app đơn giản cùng Vite

Để setup project, bạn chỉ cần gõ lệnh:

npm init @vitejs/app .

Chọn react, và sau đó là react-ts

Cuối cùng là install package và start project.

npm install
npm run dev

Mình tới đây thôi ^^. Các bạn thử tự tạo 1 project bằng create-react-app, và so sánh "one-by-one" với Vite là sẽ hiểu cái cảm giác sướng tê người vì /vit/ quá nhanh quá nguy hiểm. 👌👌👌

Cám ơn vì đã đọc đến đây ❤️ The End