Vite · Part 12 — Performance, Capstone & Migration

Mười một phần, và giờ bạn hiểu Vite từ dev server ESM native tới build production Rolldown và Environment API. Phần kết buộc tất cả lại: danh sách hiệu năng, một config capstone, và đường di trú cụ thể khỏi Webpack/CRA.

Lắp ráp config capstone và nghiên cứu bản đồ di trú:

---

1. Giữ dev nhanh

Vite nhanh mặc định, nhưng app lớn vẫn có thể chậm:

• include dep bị phát hiện trễ để tránh reload re-optimize giữa phiên.
• Tránh barrel file — index.ts khổng lồ re-export mọi thứ buộc Vite kéo vào module bạn không dùng.
• Thử full-bundle dev mode thử nghiệm — --experimentalBundle của Vite 8 bundle khi dev cho dự án rất lớn (≈3× nhanh hơn, ít request hơn).
• Làm nóng file entry hay dùng với server.warmup.

---

2. Giữ build nhanh & gọn

• Rolldown đã làm build nhanh hơn 10–30× — bạn nhận miễn phí ở Vite 8.
• Đo bằng rollup-plugin-visualizer trước khi tối ưu.
• Tách chunk vendor để dependency cache qua các deploy.
• Chọn đúng build.target — đừng transpile xuống trình duyệt cổ bạn không hỗ trợ.

---

3. Config capstone

Đây là config sẵn-sàng-production gom cả series:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { fileURLToPath, URL } from "node:url";

export default defineConfig({
  plugins: [react()], // Part 5: Fast Refresh

  resolve: {
    alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) }, // Part 2
  },

  server: {
    proxy: {
      "/api": { target: "http://localhost:8080", changeOrigin: true }, // Part 2
    },
  },

  build: {
    target: "baseline-widely-available", // Part 10
    sourcemap: true, // Part 10
    rollupOptions: {
      output: { manualChunks: { vendor: ["react", "react-dom"] } }, // Part 10
    },
  },
});

// package.json — Vite doesn't type-check, so gate the build
{
  "scripts": {
    "dev": "vite",
    "build": "tsc --noEmit && vite build",
    "preview": "vite preview"
  }
}

tsc --noEmit && đó là thứ người ta hay quên — Vite nhanh nhờ không type-check (Phần 3), nên bạn phải tự làm trong build/CI.

---

4. Di trú từ Webpack / CRA

Sự thật trấn an: khái niệm chuyển giao trực tiếp. Mọi thứ bạn học trong series Webpack đều có cái tương đương trong Vite:

Webpack / CRA	Vite	Part
entry: ./src/index.js	index.html + <script type="module">	1
webpack.config.js	vite.config.ts	2
babel-loader / ts-loader	built-in (Oxc)	3
css-loader + style-loader	built-in CSS	6
file-loader / url-loader	asset imports + ?url/?raw	7
DefinePlugin	define / import.meta.env	8
process.env.REACT_APP_*	import.meta.env.VITE_*	8
splitChunks	manualChunks / advancedChunks	10
webpack-dev-server + HMR plugin	built-in dev server + HMR	3, 5
custom loader	plugin transform hook	9

---

5. Thứ tự di trú giảm đau

1. Dựng dự án Vite mới và copy src/ vào.
2. Chuyển index.html ra gốc và thêm script module.
3. Đổi tên env var.
4. Đổi require() sang import; sửa dependency chỉ-CommonJS.
5. Thay loader bằng built-in hoặc plugin của Vite (đa số biến mất).
6. Chạy, sửa đường dẫn import & alias, rồi xóa config Webpack.

Riêng CRA, có công cụ như codemod vite, nhưng đường thủ công trên đáng tin và giúp bạn hiểu dự án.

---

6. Khi không nên di trú

Thành thật:

• Một config Webpack lớn, ổn định, đang chạy tốt và không làm chậm team.
• Phụ thuộc nặng vào Webpack Module Federation.
• Loader/plugin Webpack ngách không có tương đương Vite.

Di trú khi khởi động dev hoặc tốc độ build gây đau hằng ngày và stack phổ thông — tức đa số app.

---

7. Bài tập

1. App di trú build và chạy nhưng lỗi kiểu lọt ra production. Build script thiếu gì?

Lời giải

tsc --noEmit trước vite build — Vite không type-check, nên CI/build phải chạy compiler riêng.

2. Sau di trú từ CRA, process.env.REACT_APP_API là undefined. Tương đương Vite và thay đổi cần thiết?

Lời giải

Đổi tên biến thành VITE_API trong .env và đọc import.meta.env.VITE_API trong code.

3. Team phụ thuộc nặng vào Webpack Module Federation qua nhiều app deploy độc lập. Di trú sang Vite ngay?

Lời giải

Có lẽ chưa — Module Federation của Webpack trưởng thành nhất. Ở lại trừ khi tốc độ dev/build là vấn đề nghiêm trọng hằng ngày.

Nâng cao:trong explorer, đạt điểm 90+ ở capstone, rồi chuyển tab di trú và ánh xạ mỗi kỹ thuật đã bật về khái niệm Webpack nó thay.

---

Điểm chính

• Giữ dev nhanh bằng chỉnh optimizeDeps, ít barrel, và (app lớn) dev mode bundle.
• Config capstone là cả series gom lại — và tsc --noEmit && vite build là bắt buộc.
• Khái niệm di trú ánh xạ 1:1 từ Webpack/CRA — loader đa phần biến mất.
• Di trú vì tốc độ dev/build trên stack phổ thông; ở lại vì Module Federation trưởng thành và thiết lập ngách.
• Giờ bạn hiểu bundler và dev server, không chỉ Vite.

---

Hoàn thành series

Từ “vì sao dev server tức thì?” tới capstone production, plugin tùy chỉnh, Environment API, và kế hoạch di trú — bạn đã đi từ người dùng Vite thành người vận hành Vite. Ghép với series Webpack và bạn hiểu toàn cảnh công cụ build hiện đại.