Quay lại trang chủ

Chào mừng đến với thế giới của Vite - Nhanh, gọn, lẹ! ⚡️

Bạn đã bao giờ cảm thấy việc build front-end giống như đang kéo lê một quả tạ khổng lồ chưa? Hết Webpack, Parcel rồi đến đống cấu hình rối như canh hẹ, chỉ thiếu mỗi việc làm bạn hét lên: “Tôi ký đơn nghỉ việc đây!”

Vậy thì chào mừng bạn đến với Vite - "đứa trẻ vàng" mới trong làng build tool. Nhanh như chớp ⚡, đơn giản đến mức "chưa học React cũng làm được" (làm đc hello world thôi) và quan trọng hơn cả, nó làm cho bạn cảm thấy mình đúng là dev xịn.

img_0

Vite nghĩa là gì?

Trong tiếng Pháp, Vite nghĩa là "nhanh". Cách đọc: "vi:t", vần với beat, tui hay gọi là vịt (tui đọc sai đó kệ tui). 🦆


Tại sao phải đau khổ với build chậm?

Nghe quen không?

  • "Tui chỉnh mỗi cái class CSS mà phải đợi 5 phút để build lại!"
  • "Chạy npm start mà phải đi pha cà phê uống xong mới chạy xong..."

Đừng để những điều này làm bạn mất niềm tin vào ngành IT, vào cuộc sống này. Vite sinh ra để giúp bạn:

  • Khởi động nhanh gấp 69 lần Webpack: Không bundle đống code, chỉ gửi đúng thứ trình duyệt cần.
  • HMR nhanh đến nỗi bạn quên cả F5: Thay đổi là hiện luôn, không cần chờ (cho những ai chưa biết HMR).
  • Support TypeScript như một vị thần: Chả cần cầu kỳ setup pipeline, Vite gánh hết.

Bạn chỉ cần code và tận hưởng.


Cách chiến với Vite trong 5 nốt nhạc 🎸

1. Tạo project Vite ♪

Cầm ngay cây terminal lên và gõ:

npm create vite@latest my-vite-awesome-project -- --template react

Bạn thích Vue, Svelte, hay vanilla JS? Thay "react" bằng cái tên bạn muốn. Vite cân hết!

2. Cài dependencies và chạy dev server ♪

cd my-vite-awesome-project
npm install
npm run dev

Boom! Dev server chạy mượt hơn cả cún nhà hàng xóm rượt. 🐕 💨

3. Dọn nhà với cấu trúc thư mục ♪

Project Vite nhìn sẽ rất... tối giản:

my-vite-awesome-project/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/
│ │ └── react.svg
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── index.html
└── vite.config.js

Bạn có thể thêm vào các thư mục như styles, utils, hay serviceskhông ai đánh giá đâu.

4. Cấu hình Vite như một pro ♪

Mở file vite.config.js và thêm một số cấu hình:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});

Đoạn code trên giúp bạn cấu hình cổng dev server, thư mục xuất file khi build, và bật source map. Vite còn rất nhiều cách để cấu hình tuỳ thích!

5. Thêm chút code và chiêm ngưỡng sự kỳ diệu ♪

Tạo một component mới src/Hello.jsx và xem Viteeee 🦆 làm việc:

import { useState } from 'react';

export default function Hello() {
  const [name, setName] = useState('Slim Shady');

  return (
    <div>
      <h1>My name is, chka-chka, {name}!</h1>
      <input
        type="text"
        value={name}
        // tui  fan :)
        // onChange={() => setName('Slim Shady')}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter a name"
      />
    </div>
  );
}

Sau đó, import và sử dụng nó trong 'App.jsx':

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '../public/vite.svg';
import './App.css';
import Hello from './Hello.jsx';

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Hello />

      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

Lưu lại và tận hưởng quá trình cập nhật cực nhanh của Vite!

Những thứ hay ho mà Vite có thể làm Vite không chỉ đơn giản là "công cụ build". Nó còn rất nhiều tính năng thú vị:

Tự động tối ưu hóa tài nguyên tĩnh: Hình ảnh, icon hay bất kỳ tài nguyên nào, Vite đều làm cho chúng nhỏ gọn hơn. Quản lý môi trường với .env dễ dàng: Các biến môi trường? Đơn giản thôi, chỉ cần tạo file .env là xong. Plugins? Số lượng vô tận: Có plugin cho mọi nhu cầu, từ CSS pre-processors cho đến việc tối ưu hóa ảnh. Pre-processors CSS? Chắc chắn rồi: Cài Sass? Cứ làm thôi, Vite lo phần còn lại. Thêm Sass vào Vite

npm install --save-dev sass

Tạo file App.scss và thêm mã:

$awesome-color: #ff69b4;
.card {
  color: $awesome-color;
}

Sau đó, import file Sass vào App.jsx:

import './App.scss';

Kết luận: Vite chính là "quái vật" đích thực 🎸

Nhanh: Dev server nhanh đến mức bạn sẽ quên mất việc refresh lại trang. Dễ thiết lập: Chỉ cần một dòng lệnh, bạn đã có ngay một project để bắt đầu. Framework agnostic: Dù bạn là fan của React, Vue, Svelte hay thậm chí chỉ thích vanilla JS, Vite đều hỗ trợ. Sẵn sàng cho môi trường sản xuất: Rollup sẽ tối ưu mã nguồn để bạn có những bundle nhẹ nhàng, mượt mà. Vậy thì, đừng ngần ngại nữa, hãy bắt đầu với Vite ngay hôm nay! 🏃💨