Vite là gì? Hướng dẫn Khởi tạo dự án React với Vite

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

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ồi enter - mình sẽ chọn React 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:

• Hướng dẫn khởi tạo dự án Typescript với VSCode
• Prettier là gì? Công cụ Định dạng mã nguồn tự động cho Lập trình viên
• Thư viện Husky là gì? Đảm bảo chất lượng Code với Git Hooks và Husky
• ESLint là gì? Hướng dẫn cấu hình ESLint cho dự án Typescript