Posted inDevelopment

Vĩnh biệt Webpack: Cách mình ‘hack’ tốc độ Build dự án gấp 10 lần với Vite

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Cơn ác mộng mang tên “Waiting for build…”

Nếu anh em đang chiến các dự án React hoặc Vue quy mô lớn, chắc hẳn không lạ gì cảnh nhấn Ctrl + S xong là phải ngồi nhìn vòng xoay loading. Có những lúc mình phải đợi tới 10 giây chỉ để thấy một thay đổi nhỏ trên giao diện. Cảm giác mạch code bị ngắt quãng liên tục cực kỳ khó chịu.

Tại sao Webpack lại chậm? Nguyên nhân nằm ở cơ chế “bundle-based”. Webpack phải quét sạch sành sanh mọi file, xây dựng dependency graph rồi mới chịu đóng gói tất cả thành một file bundle duy nhất để chạy. Codebase càng phình to, Webpack càng “ì”. Mình từng quản lý một dự án với hơn 1.500 module, mỗi lần khởi động dev server mất gần 2 phút. Sau khi chuyển sang Vite, con số này giảm xuống còn chưa đầy 1.5 giây. Anh em trong team không còn phải tranh thủ đi pha cafe mỗi lần restart server nữa.

Vite (tiếng Pháp nghĩa là “nhanh”) xử lý vấn đề này bằng hai vũ khí hạng nặng:

  • Native ESM: Vite không đóng gói code ở môi trường dev. Nó để trình duyệt tự yêu cầu file nào cần thiết thông qua ES Modules. Trình duyệt gọi đến đâu, Vite phản hồi đến đó.
  • Esbuild: Đây là công cụ build viết bằng Go. Tốc độ của nó nhanh gấp 10 đến 100 lần so với các công cụ viết bằng JavaScript truyền thống.

Khởi tạo dự án trong “một nốt nhạc”

Để bắt đầu, anh em chỉ cần Node.js phiên bản 18 trở lên. Đừng cài đặt rườm rà, hãy mở terminal và gõ lệnh:

npm create vite@latest my-awesome-app

Vite sẽ hỏi bạn muốn dùng framework nào. Khác với create-react-app hay cài sẵn hàng tá thư viện rác, Vite cực kỳ tinh gọn. Nó chỉ cung cấp những thứ thực sự cần thiết để app chạy được.

Nếu chọn combo React + TypeScript, cấu trúc thư mục sẽ như sau:

my-awesome-app/
├── src/
│   ├── App.tsx
│   └── main.tsx
├── index.html
├── package.json
└── vite.config.ts

Điểm thú vị là file index.html nằm ngay ở thư mục gốc. Vite coi đây là điểm bắt đầu (entry point) để phân tích các thẻ <script type="module">. Cách tiếp cận này giúp việc load code diễn ra gần như tức thì.

Giờ thì cài đặt và chạy thử thôi:

cd my-awesome-app
npm install
npm run dev

Tinh chỉnh Config cho dự án thực tế

Dù cấu hình mặc định đã rất ổn, nhưng khi làm dự án thực tế, mình thường bổ sung vài tùy chỉnh trong file vite.config.ts để làm việc sướng hơn.

1. Thiết lập Alias (Đường dẫn rút gọn)

Đừng để code trông rối mắt với những dòng import Header from '../../../components/Header'. Hãy dùng alias để mọi thứ gọn gàng hơn.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

2. Bảo mật biến môi trường

Vite không dùng process.env mà chuyển sang import.meta.env. Một quy tắc quan trọng: chỉ những biến bắt đầu bằng VITE_ mới được phép lộ diện ở phía client.

# .env
VITE_API_URL=https://api.itfromzero.com
SECRET_KEY=123456 # Biến này sẽ được giữ kín trên server

Khi dùng trong code, bạn chỉ cần gọi import.meta.env.VITE_API_URL là xong.

3. Vượt rào CORS với Proxy

Lỗi CORS khi gọi API ở local là chuyện cơm bữa. Vite cho phép bạn cấu hình proxy cực nhanh để đánh lừa trình duyệt:

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

Kiểm soát cân nặng của Bundle

Trước khi deploy, việc kiểm tra xem file build nặng nhẹ ra sao là bắt buộc. Vite sử dụng Rollup để đóng gói bản production, hỗ trợ tree-shaking rất mạnh giúp loại bỏ code thừa.

Mình hay dùng rollup-plugin-visualizer để xem biểu đồ dung lượng các thư viện. Nó giúp bạn phát hiện ra những “kẻ xâm nhập” nặng nề như Moment.js hay Lodash bản đầy đủ.

npm install -D rollup-plugin-visualizer

Sau đó, thêm vào plugin trong config:

import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [react(), visualizer({ open: true })],
})

Khi chạy npm run build, một sơ đồ trực quan sẽ hiện ra. Bạn sẽ biết chính xác mình cần tối ưu ở đâu.

Lời khuyên khi triển khai

Khi deploy lên Vercel hay Netlify, lệnh build vẫn là vite build và sản phẩm nằm trong thư mục dist/. Một điểm cộng lớn là Vite tự động tách CSS thành các file nhỏ theo từng chunk JavaScript. Điều này giúp người dùng load trang nhanh hơn vì trình duyệt không phải tải một file CSS tổng khổng lồ ngay từ đầu.

Thay đổi từ Webpack sang Vite không chỉ là đổi công cụ. Đó là cách bạn nâng cấp trải nghiệm làm việc mỗi ngày. Nếu dự án của bạn đang chậm chạp, hãy thử migration ngay hôm nay. Sự khác biệt về tốc độ chắc chắn sẽ khiến bạn kinh ngạc.

Share:
Tags: