การ Build สำหรับ Production

เมื่อถึงเวลาที่จะ deploy แอพของคุณสำหรับ production ให้รันคำสั่ง vite build เท่านั้น โดยค่าเริ่มต้น Vite จะใช้ <root>/index.html เป็นจุดเริ่มต้นในการ build และสร้าง application bundle ที่เหมาะสำหรับการให้บริการผ่าน static hosting ตรวจสอบคู่มือ Deploying a Static Site สำหรับคำแนะนำเกี่ยวกับบริการยอดนิยมต่างๆ

ความเข้ากันได้กับเบราว์เซอร์

โดยค่าเริ่มต้น production bundle จะสันนิษฐานว่ารองรับ JavaScript สมัยใหม่ เช่น native ES Modules, native ESM dynamic import, import.meta, nullish coalescing และ BigInt ช่วงการรองรับเบราว์เซอร์เริ่มต้นคือ:

• Chrome >=87
• Firefox >=78
• Safari >=14
• Edge >=88

คุณสามารถระบุเป้าหมายที่กำหนดเองได้ผ่านตัวเลือก build.target ในไฟล์คอนฟิก โดยเป้าหมายต่ำสุดคือ es2015 หากตั้งค่าเป้าหมายที่ต่ำกว่า Vite จะยังคงต้องการช่วงการรองรับเบราว์เซอร์ขั้นต่ำเหล่านี้เนื่องจากต้องพึ่งพา native ESM dynamic import และ import.meta:

• Chrome >=64
• Firefox >=67
• Safari >=11.1
• Edge >=79

โปรดทราบว่าโดยค่าเริ่มต้น Vite จะจัดการเฉพาะการแปลงไวยากรณ์และไม่ครอบคลุม polyfills คุณสามารถตรวจสอบ https://cdnjs.cloudflare.com/polyfill/ ซึ่งสร้าง polyfill bundles โดยอัตโนมัติตาม UserAgent string ของเบราว์เซอร์ผู้ใช้

เบราว์เซอร์รุ่นเก่าสามารถรองรับได้ผ่าน @vitejs/plugin-legacy ซึ่งจะสร้าง legacy chunks และ polyfills คุณสมบัติภาษา ES ที่เกี่ยวข้องโดยอัตโนมัติ legacy chunks จะถูกโหลดแบบมีเงื่อนไขเฉพาะในเบราว์เซอร์ที่ไม่มีการรองรับ native ESM

Public Base Path

เกี่ยวข้องกับ: การจัดการสินทรัพย์

หากคุณกำลัง deploy โปรเจ็กต์ของคุณภายใต้ public path ที่ซ้อนกัน เพียงระบุตัวเลือก base ในคอนฟิกและพาธของสินทรัพย์ทั้งหมดจะถูกเขียนใหม่ตามนั้น ตัวเลือกนี้ยังสามารถระบุเป็นแฟล็กคำสั่งได้ เช่น vite build --base=/my/public/path/

URL สินทรัพย์ที่นำเข้าด้วย JS, การอ้างอิง url() ใน CSS และการอ้างอิงสินทรัพย์ในไฟล์ .html ของคุณจะถูกปรับให้เคารพตัวเลือกนี้โดยอัตโนมัติระหว่างการ build

ข้อยกเว้นคือเมื่อคุณต้องการเชื่อมต่อ URL แบบไดนามิก ในกรณีนี้คุณสามารถใช้ตัวแปร import.meta.env.BASE_URL ที่ถูกฉีดเข้าไปทั่วโลกซึ่งจะเป็น public base path โปรดทราบว่าตัวแปรนี้ถูกแทนที่แบบคงที่ระหว่างการ build ดังนั้นจะต้องปรากฏตามที่เป็น (เช่น import.meta.env['BASE_URL'] จะไม่ทำงาน)

สำหรับการควบคุม base path ขั้นสูง ให้ดูที่ ตัวเลือก Base ขั้นสูง

Base Path แบบสัมพัทธ์

หากคุณไม่ทราบ base path ล่วงหน้า คุณสามารถตั้งค่า base path แบบสัมพัทธ์ด้วย "base": "./" หรือ "base": "" ซึ่งจะทำให้ URL ที่สร้างขึ้นทั้งหมดเป็นแบบสัมพัทธ์กับแต่ละไฟล์

การรองรับเบราว์เซอร์รุ่นเก่าเมื่อใช้ base แบบสัมพัทธ์

จำเป็นต้องมีการรองรับ import.meta สำหรับ base แบบสัมพัทธ์ หากคุณต้องการรองรับเบราว์เซอร์ที่ไม่รองรับ import.meta คุณสามารถใช้ปลั๊กอิน legacy ได้

การปรับแต่ง Build

การ build สามารถปรับแต่งได้ผ่านตัวเลือกคอนฟิก build ต่างๆ โดยเฉพาะอย่างยิ่ง คุณสามารถปรับตัวเลือก Rollup พื้นฐานได้โดยตรงผ่าน build.rollupOptions:

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/configuration-options/
    },
  },
});

ตัวอย่างเช่น คุณสามารถระบุ Rollup outputs หลายรายการพร้อมปลั๊กอินที่ใช้เฉพาะระหว่างการ build

กลยุทธ์การแบ่ง Chunk

คุณสามารถกำหนดค่าวิธีการแบ่ง chunks โดยใช้ build.rollupOptions.output.manualChunks (ดูเอกสาร Rollup) หากคุณใช้เฟรมเวิร์ก โปรดดูเอกสารของเฟรมเวิร์กนั้นสำหรับการกำหนดค่าการแบ่ง chunks

การจัดการข้อผิดพลาดในการโหลด

Vite จะปล่อยเหตุการณ์ vite:preloadError เมื่อล้มเหลวในการโหลด dynamic imports event.payload จะมีข้อผิดพลาดการนำเข้าเดิม หากคุณเรียก event.preventDefault() ข้อผิดพลาดจะไม่ถูกโยน

window.addEventListener("vite:preloadError", (event) => {
  window.location.reload(); // ตัวอย่างเช่น รีเฟรชหน้า
});

เมื่อมีการ deploy ใหม่ บริการโฮสติ้งอาจลบสินทรัพย์จากการ deploy ก่อนหน้า ส่งผลให้ผู้ใช้ที่เข้าชมเว็บไซต์ของคุณก่อนการ deploy ใหม่อาจพบข้อผิดพลาดในการนำเข้า ข้อผิดพลาดนี้เกิดขึ้นเพราะสินทรัพย์ที่ทำงานบนอุปกรณ์ของผู้ใช้นั้นล้าสมัยและพยายามนำเข้า chunk เก่าที่เกี่ยวข้องซึ่งถูกลบไปแล้ว เหตุการณ์นี้มีประโยชน์ในการจัดการสถานการณ์นี้

สร้างใหม่เมื่อไฟล์เปลี่ยนแปลง

คุณสามารถเปิดใช้งาน rollup watcher ด้วย vite build --watch หรือคุณสามารถปรับตัวเลือก WatcherOptions พื้นฐานได้โดยตรงผ่าน build.watch:

// vite.config.js
export default defineConfig({
  build: {
    watch: {
      // https://rollupjs.org/configuration-options/#watch
    },
  },
});

เมื่อเปิดใช้งานแฟล็ก --watch การเปลี่ยนแปลงไฟล์ vite.config.js รวมถึงไฟล์ใดๆ ที่จะถูก bundle จะทริกเกอร์การสร้างใหม่

แอปหลายหน้า (Multi-Page App)

สมมติว่าคุณมีโครงสร้างซอร์สโค้ดดังต่อไปนี้:

├── package.json
├── vite.config.js
├── index.html
├── main.js
└── nested
    ├── index.html
    └── nested.js

ระหว่างการพัฒนา เพียงแค่นำทางหรือลิงก์ไปที่ /nested/ - มันทำงานตามที่คาดหวัง เหมือนกับเซิร์ฟเวอร์ไฟล์แบบปกติ

ระหว่างการ build สิ่งที่คุณต้องทำคือระบุไฟล์ .html หลายไฟล์เป็นจุดเริ่มต้น:

// vite.config.js
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import { defineConfig } from "vite";

const __dirname = dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        nested: resolve(__dirname, "nested/index.html"),
      },
    },
  },
});