Bạn đang tìm kiếm một cách nhanh chóng và dễ dàng để thiết lập môi trường phát triển React. Vite có thể chính là câu trả lời mà bạn đang tìm kiếm. Với tốc độ nhanh và cấu hình đơn giản, Vite đang trở thành lựa chọn hàng đầu của các developer. Hãy cùng mình biến Vite trở thành trợ thủ đắc lực nhé.
Trong bài viết này, hãy cùng mình tìm hiểu về:
- Vite là gì và đặc điểm nổi bật
- Hướng dẫn chi tiết cách khởi tạo dự án React + Vite
1. Vite là gì?
Vite (phát âm là "vit", nghĩa là "nhanh" trong tiếng Pháp) hay Vitejs là một công cụ build và phát triển ứng dụng web được tạo ra bởi Evan You, người đã phát triển Vue.js, Vite ra đời mục đích khắc phục những hạn chế về tốc độ và hiệu suất.
Vite mang đến cách tiếp cận mới trong việc xây dựng các dự án web bằng cách tận dụng các module ES gốc trong trình duyệt và cung cấp tính năng Hot Module Replacement (HMR).
Giả sử bạn đang xây dựng một ứng dụng web đơn giản với React. Trước khi có Vite, công cụ phổ biến như Webpackhoặc Create React App (CRA) được sử dụng nhiều. Tuy nhiên, các công cụ này có thể chậm khi khởi động hoặc cập nhật code.
2. Vì sao Vite lại nhanh hơn?
- Trước đây, Webpack phải thực hiện quá trình "đóng gói" (bundle) toàn bộ mã nguồn thành một hoặc nhiều tệp lớn trước khi trình duyệt có thể tải và hiển thị trang web, làm cho việc khởi động dự án mất nhiều thời gian, đặc biệt khi mã nguồn lớn và phức tạp.
- Vite khác biệt ở chỗ nó tận dụng Rollup để thực hiện việc đóng gói mã cuối cùng, tạo ra các file nhỏ gọn và tối ưu, từ đó cải thiện hiệu suất tổng thể của ứng dụng.
- Điều đáng chú ý hơn là cách Vite xử lý mã nguồn trong quá trình phát triển. Thay vì gộp tất cả mã lại từ đầu, Vite sử dụng ES Modules – một tiêu chuẩn JavaScript được browser hỗ trợ – để tải từng module riêng lẻ khi cần thiết. Nói cách khác, nếu trang web của bạn sử dụng nhiều file JavaScript, Vite sẽ chỉ phân phát những file nào mà trình duyệt yêu cầu vào đúng thời điểm đó, thay vì tải toàn bộ ngay từ đầu.
- Khi bạn sửa đổi mã, Vite chỉ cập nhật phần liên quan mà không cần phải đóng gói lại toàn bộ ứng dụng. Điều này không chỉ giúp tốc độ phản hồi nhanh hơn mà còn mang lại trải nghiệm phát triển mượt mà và liên tục, giúp bạn thấy ngay kết quả thay đổi mà không làm gián đoạn quá trình làm việc.
Bạn có thể hiểu đơn giản là, Vite "chia nhỏ" công việc và chỉ làm những gì cần thiết ngay lúc đó, thay vì gộp mọi thứ vào một bước, giúp quá trình phát triển nhanh và linh hoạt hơn nhiều.
3. Tại sao nên sử dụng Vite
- Khởi động nhanh chóng: Vite cho phép bạn bắt đầu dự án gần như ngay lập tức, giúp bạn tiết kiệm thời gian.
- Cấu hình đơn giản: Vite được thiết kế để dễ dàng thiết lập, đặc biệt thân thiện với người mới bắt đầu, giúp bạn khởi tạo dự án mà không cần phải loay hoay với các cấu hình phức tạp.
- Hỗ trợ TypeScript: Vite tích hợp tốt với TypeScript, giúp bạn viết mã nguồn an toàn và dễ bảo trì hơn, đồng thời tận dụng đầy đủ các tính năng mạnh mẽ của TypeScript.
- Hiệu suất cao: nhờ sử dụng ES Modules gốc của trình duyệt và tính năng Hot Module Replacement (HMR), Vite mang đến trải nghiệm phát triển mượt mà, với phản hồi tức thì khi bạn thay đổi mã.
4. Đặc điểm và chức năng của Vite
- Phân phát tệp theo yêu cầu qua ESM gốc: thay vì đóng gói toàn bộ mã nguồn thành một khối lớn, Vite tận dụng các modules ECMAScript (ESM) gốc của browser để tải từng tệp riêng lẻ khi cần. Cách tiếp cận này giúp loại bỏ quá trình đóng gói phức tạp, tăng tốc và tối ưu hiệu suất.
- Hot Module Replacement (HMR): Vite cung cấp tính năng cho bạn thấy ngay lập tức những thay đổi trong code mà không cần phải reload trang hoặc mất đi trạng thái ứng dụng. Điều này giúp trải nghiệm phát triển trở nên mượt mà và liền mạch hơn.
- API plugin và API JavaScript của Vite: bạn có thể thêm các tính năng mới, thay đổi cách Vite hoạt động, hoặc tích hợp với các công cụ khác để phù hợp với yêu cầu của dự án từ đơn giản đến phức tạp.
- Hỗ trợ nhiều framework và công nghệ: Vite hoạt động tốt với React, Vue. Ngoài ra, còn tích hợp được với Sass và Tailwindcss, giúp bạn xây dựng ứng dụng một cách dễ dàng và hiệu quả.
5. So sánh giữa Webpack và Vite
Vite | Webpack | |
---|---|---|
Tốc độ khởi động | Khởi động nhanh nhờ sử dụng ES Modules gốc của trình duyệt, chỉ tải các tệp cần thiết. | Khởi động chậm hơn do phải đóng gói toàn bộ mã trước khi chạy. |
Phản hồi khi thay đổi mã | HMR (Hot Module Replacement) nhanh, mượt mà, chỉ cập nhật phần code thay đổi. | HMR khả dụng nhưng có thể chậm hơn, đặc biệt với mã nguồn phức tạp. |
Cấu hình | Cấu hình đơn giản, thân thiện với người mới bắt đầu, có sẵn thiết lập cho các framework phổ biến. | Cấu hình phức tạp, cần nhiều thiết lập thủ công để tối ưu. |
Hỗ trợ mở rộng và plugin | Hỗ trợ API plugin mạnh mẽ, dễ tùy chỉnh và mở rộng theo nhu cầu dự án. | Plugin hỗ trợ mạnh mẽ nhưng có thể phức tạp và khó tích hợp hơn. |
Kích thước build cuối cùng | Dùng Rollup để đóng gói, thường tạo ra các file nhỏ gọn và tối ưu. | Có thể tối ưu kích thước build nhưng cần nhiều cấu hình để đạt hiệu quả tốt nhất. |
6. Hướng dẫn khởi tạo dự án React Vite
Mình giả sử rằng máy bạn đã có Nodejs rồi nhé, nếu chưa biết làm như thế nào, bạn có thể tham khảo tại đây.
6.1 Khởi tạo dự án với Vite
//npm
npm create vite
//yarn
yarn create vite
//pnpm
pnpm create vite
//bun
bun create vite
Sau đó trả lời những câu hỏi:
- Need to install the following packages: create-vite@5.5.2 Ok to proceed? (y) -
y
- Project name: nhập tên bạn muốn đặt cho project - nếu bạn muốn khởi tạo ngay thư mục bạn đang đứng thì
./
- Package name: nhập tên package. Bạn có thể
enter
luôn - sẽ lấy tên project của bạn - Select a framework: dùng
arrow-keys
để điều khiển đến framework bạn muốn dùng rồienter
- mình sẽ chọnReact
nha. - Select a variant: tương tự như cách select framework nha - mình chọn
Typescript + SWC
.
Mình nói thêm một chút, TypeScript + SWC (Speedy Web Compiler) - một trình biên dịch thay thế cho Babel, giúp cải thiện hiệu suất phát triển và xây dựng dự án.
Sau khi bạn cài đặt xong, sẽ làm theo hướng dẫn npm install
để cài đặt các thư viện cần thiết. Cuối cùng là npm run dev
để chạy dự án.
Mặc định Vite sẽ chạy port 5173, nếu bạn muốn config lại port thì mở file vite.config.ts
và sửa lại.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
})
Khi code, bạn muốn responsive chạy trên thiết bị thật. Đừng lo, Vite cũng hỗ trợ bạn. Mở file package.json
thay đổi script "dev": "vite",
thành "dev": "vite --host",
và chạy lại lệnh npm run dev
Giờ thì bạn có thể mở browser trên điện thoại nhập link network và có thể dev trên điện thoại được rồi.
6.2 Thử nghiệm Hot Module Replacement (HMR)
Bạn mở thử file src/App.tsx
và chỉnh sửa nội dung thẻ h1
thành Hello, 200Lab
. Khi bạn lưu file, web sẽ tự động cập nhật mà không cần reload page.
6.3 Build cho Production
Bạn chạy lệnh npm run build
. Vite sẽ tạo ra một thư mục dist/ chứa các file đã được tối ưu hoá. Bạn có thể xem trước bằng lệnh npm run preview
. Server của bạn sẽ chạy tại http://localhost:4173/
7. Kết luận
Vite không chỉ mang đến tốc độ và hiệu suất vượt trội, mà còn giúp bạn đơn giản hóa quá trình phát triển ứng dụng web với React và TypeScript.
Nếu bạn đang tìm kiếm một giải pháp thay thế cho các công cụ truyền thống như Webpack, hãy thử trải nghiệm Vite, bạn sẽ thấy rõ sự khác biệt. Đừng ngần ngại mà hãy bắt tay vào xây dựng dự án đầu tiên của mình với Vite.
Các bài viết liên quan:
Tran Thuy Vy
Mình sẽ không chết vì những điều mình không biết, nhưng sẽ chết vì những điều mình tưởng rằng mình biết
follow me :
Bài viết liên quan
Remix là gì? Framework Full-Stack cho Web Developer
Oct 03, 2024 • 7 min read
Hướng dẫn Khởi tạo dự án Typescript với VSCode
Sep 25, 2024 • 7 min read
Các thuật toán sắp xếp cơ bản: Đâu là sự lựa chọn tốt nhất?
Sep 23, 2024 • 8 min read
Typescript là gì? Vì sao TypeScript là lựa chọn hàng đầu cho Dự án lớn
Sep 20, 2024 • 9 min read
CSS là gì? Vai trò của CSS trong thiết kế giao diện Web
Sep 19, 2024 • 7 min read
ReactJS là gì? Thư viện Javascript tối ưu cho giao diện Web
Sep 12, 2024 • 11 min read