Vite · Part 10 — Production Builds with Rolldown

Mọi thứ tới giờ là về dev server. Giờ tới nửa kia: vite build. Trong Vite 8 nó giao cho Rolldown, một bundler Rust nhanh hơn 10–30× đường Rollup cũ trong khi giữ cùng API plugin.

Bật/tắt tùy chọn build và xem output dist/ và chunk đổi:

---

1. vite build tạo gì

vite build

dist/
├─ index.html                  ← entry, with hashed asset links injected
├─ assets/
│  ├─ index-a1b2c3.js          ← your app entry chunk
│  ├─ index-c3d4e5.css         ← extracted, hashed CSS
│  ├─ vendor-e5f6a7.js         ← dependencies (if split)
│  ├─ Dashboard-789012.js      ← a lazy route chunk
│  └─ logo-1234.svg            ← hashed asset

Mỗi tên file JS/CSS/asset mang một hash nội dung để cache dài hạn an toàn — đổi file, hash đổi, cache bị bust. index.html được viết lại để trỏ tới file đã hash. Đây là chiến lược cache dài hạn từ series Webpack, tự động ở đây.

---

2. Tách code tự động

Vite tách code tại ranh giới dynamic import không cần config:

const Dashboard = lazy(() => import("./routes/Dashboard"));

import() đó thành chunk riêng (Dashboard-789012.js), chỉ tải khi route được mở. CSS của nó cũng được tách (Phần 6). Trong explorer, bật route lazy cho thấy nó rời khỏi tải ban đầu.

---

3. Tách vendor

Mặc định dependency của bạn có thể bundle vào chunk chính. Tách chúng vào chunk vendor riêng nghĩa là trình duyệt cache chúng qua các lần deploy (chúng đổi ít hơn code của bạn).

Cách cổ điển, vẫn hỗ trợ — manualChunks:

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: { vendor: ["react", "react-dom"] },
      },
    },
  },
});

Vite 8 / Rolldown cũng thêm advancedChunks cho tách linh hoạt hơn, theo luật (theo kích thước, theo pattern đường dẫn module) — nhóm chunk kiểu webpack:

export default defineConfig({
  build: {
    rolldownOptions: {
      output: {
        advancedChunks: {
          groups: [{ name: "vendor", test: /node_modules/ }],
        },
      },
    },
  },
});

Đừng tách quá — quá nhiều chunk nhỏ thêm overhead request. Tách vendor và route lazy; để Vite lo phần còn lại.

---

4. Target & minify

export default defineConfig({
  build: {
    target: "baseline-widely-available", // modern default; or e.g. "es2020"
    minify: "esbuild", // default, fast; or "terser" for max compression
  },
});

• mức tính năng JS của output. Target thấp = transpile nhiều + output to hơn.
• Vite minify mặc định khi production; terser ép thêm chút đổi lấy thời gian build.

Cho trình duyệt cũ, thêm @vitejs/plugin-legacy để phát bundle fallback.

---

5. Source map & phân tích

export default defineConfig({
  build: {
    sourcemap: true, // "hidden" to emit maps without the //# comment
  },
});

Source map làm stack trace production đọc được (upload lên error tracker, đừng phục vụ công khai nếu code nhạy cảm). Để xem gì trong bundle, dùng rollup-plugin-visualizer cho treemap — cùng kỷ luật đo-trước từ series Webpack.

---

6. Luôn preview trước khi ship

vite build && vite preview

preview phục vụ dist/ thật để bạn bắt vấn đề chỉ xuất hiện trong bundle production: base sai, env var thiếu, dynamic import không phân giải. Đừng giả định “chạy khi dev” nghĩa là “chạy khi build”.

---

7. Bài tập

1. Vì sao mọi file trong dist/assets có hash trong tên, và sẽ hỏng gì nếu không?

Lời giải

Hash nội dung cho cache dài hạn an toàn: khi nội dung đổi URL đổi, bust cache cũ. Không có chúng, user có thể nhận JS/CSS cũ sau deploy.

2. react/react-dom build lại và tải lại mỗi lần deploy dù không đổi. Sửa caching sao?

Lời giải

Tách vào chunk vendor để có hash ổn định và giữ cache qua các deploy.

3. Đồng đội ship thẳng từ output vite build mà không kiểm tra. Lệnh nào nên có trong quy trình deploy và vì sao?

Lời giải

vite preview — nó phục vụ bundle production thật cục bộ để vấn đề như base sai hoặc env var thiếu lộ ra trước khi user gặp.

Nâng cao:trong explorer, bật tách vendor + route lazy và để ý KB tải-ban-đầu giảm khi code chuyển vào chunk cache-riêng và theo-yêu-cầu.

---

Điểm chính

• vite build tạo dist/ đã hash, tối ưu qua Rolldown.
• Tách code tự động tại ranh giới dynamic-import; CSS cũng tách.
• Tách chunk vendor để cache qua deploy.
• Chỉnh target và minify; thêm plugin-legacy cho trình duyệt cũ.
• Luôn vite preview output thật trước khi ship.

---

Tiếp theo

Phần 11 — Library mode + SSR & Environment API: xây thư viện publish được với Vite, sinh type, và tổng quan SSR cùng mô hình build đa-môi-trường mới.