Vite Build Configuration API

Vite มีตัวเลือกการ build มากมายที่ช่วยให้คุณปรับแต่งการ build แอปพลิเคชันของคุณได้อย่างละเอียด ในส่วนนี้เราจะมาดูตัวเลือกต่างๆ ที่มีให้ใช้งาน

build.target

ระบุสภาพแวดล้อมเป้าหมายสำหรับการ build ทั้งเวอร์ชัน JavaScript และเบราว์เซอร์ ช่วยควบคุมความเข้ากันได้ของโค้ดที่ถูก build ออกมา

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // ระบุเวอร์ชันของเบราว์เซอร์ที่ต้องการรองรับ
    target: "es2020",

    // หรือระบุเป็น array ของ targets
    target: ["es2020", "chrome58", "edge16", "firefox57", "safari11"],

    // หรือใช้ 'modules' สำหรับการรองรับ ES modules
    target: "modules",
  },
});

คำอธิบายเพิ่มเติม:

• ใช้สำหรับระบุเวอร์ชันของ JavaScript ที่ต้องการรองรับ
• ค่าเริ่มต้นคือ 'modules' ซึ่งจะสร้างโค้ดที่เข้ากันได้กับ ES modules
• รองรับการระบุเป็น string หรือ array ของ targets

build.outDir

ระบุไดเรกทอรีที่ใช้สำหรับไฟล์ที่ build แล้ว ควรแยกจากโค้ดต้นฉบับเพื่อความสะดวกในการจัดการ

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // ระบุชื่อโฟลเดอร์ที่ต้องการ
    outDir: "dist",

    // สามารถระบุ path แบบเต็มได้
    outDir: path.resolve(__dirname, "build"),
  },
});

คำแนะนำ:

• ควรเก็บไฟล์ build ไว้ในโฟลเดอร์ที่แยกจากโค้ดต้นฉบับ
• ระวังการลบไฟล์ในโฟลเดอร์นี้เมื่อใช้ build.emptyOutDir: true

build.assetsDir

ระบุไดเรกทอรีย่อยสำหรับเก็บ static assets ช่วยจัดระเบียบไฟล์ที่ถูก build ออกมา

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // ระบุชื่อโฟลเดอร์สำหรับ assets
    assetsDir: "assets",

    // ใช้ string เปล่าเพื่อเก็บไฟล์ที่ root
    assetsDir: "",
  },
});

build.assetsInlineLimit

กำหนดขนาดไฟล์สูงสุดที่จะถูกแปลงเป็น base64 ช่วยลดจำนวน request สำหรับไฟล์ขนาดเล็ก

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // ไฟล์ที่เล็กกว่า 4KB จะถูกแปลงเป็น base64
    assetsInlineLimit: 4096,

    // ตั้งค่าเป็น 0 เพื่อปิดการแปลงเป็น inline
    assetsInlineLimit: 0,
  },
});

build.cssCodeSplit

เปิด/ปิดการแยก CSS ออกเป็นไฟล์แยก ช่วยให้โหลด CSS ได้อย่างมีประสิทธิภาพมากขึ้น

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // เปิดการแยก CSS (ค่าเริ่มต้น: true)
    cssCodeSplit: true,
  },
});

build.sourcemap

สร้าง source maps สำหรับการดีบัก ช่วยให้ติดตามปัญหาในโค้ดต้นฉบับได้ง่ายขึ้น

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // สร้าง source maps (ค่าเริ่มต้น: false)
    sourcemap: true,

    // หรือระบุประเภทของ source map
    sourcemap: "inline", // หรือ 'hidden'

    // สำหรับ production อาจใช้ 'hidden-source-map'
    sourcemap: process.env.NODE_ENV === "production" ? "hidden" : true,
  },
});

build.rollupOptions

กำหนดค่าเพิ่มเติมสำหรับ Rollup ช่วยปรับแต่งขั้นตอนการ build ให้ละเอียดยิ่งขึ้น

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      // ระบุ entry points
      input: {
        main: "index.html",
        about: "about.html",
      },

      // กำหนด output options
      output: {
        entryFileNames: "js/[name].[hash].js",
        chunkFileNames: "js/[name].[hash].js",
        assetFileNames: "assets/[name].[hash][ext]",
      },

      // ระบุ external dependencies
      external: ["some-external-dependency"],
    },
  },
});

build.minify

เปิด/ปิดการ minify หรือระบุ minifier ที่ต้องการใช้ ช่วยลดขนาดไฟล์สำหรับ production

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // เปิด/ปิดการ minify (ค่าเริ่มต้น: 'esbuild')
    minify: "esbuild", // หรือ 'terser' หรือ 'false'

    // หรือระบุเป็น boolean
    minify: process.env.NODE_ENV === "production",
  },
});

build.terserOptions

กำหนดค่าเพิ่มเติมสำหรับ Terser ช่วยปรับแต่งกระบวนการ minify ให้เฉพาะเจาะจง

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        // ลบ console.log ใน production
        drop_console: process.env.NODE_ENV === "production",
        drop_debugger: true,
      },
      format: {
        // เก็บ comments บางส่วน
        comments: "some",
      },
      mangle: {
        // ระบุชื่อที่ต้องการคงไว้
        reserved: ["SomeGlobal"],
      },
    },
  },
});

build.emptyOutDir

ลบเนื้อหาใน outDir ก่อน build ใหม่

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // ลบไฟล์ใน outDir ก่อน build (ค่าเริ่มต้น: true)
    emptyOutDir: true,
  },
});

build.reportCompressedSize

แสดงขนาดไฟล์ที่บีบอัดแล้วใน console

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // แสดงขนาดไฟล์ที่บีบอัดแล้ว (ค่าเริ่มต้น: true)
    reportCompressedSize: true,
  },
});

build.chunkSizeWarningLimit

กำหนดขนาดไฟล์ (ใน KB) ที่จะแสดงคำเตือนเมื่อมี chunk ใหญ่เกินไป

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // แสดงคำเตือนเมื่อมี chunk ใหญ่กว่า 1000KB (ค่าเริ่มต้น: 500)
    chunkSizeWarningLimit: 1000,
  },
});

build.watch

เปิดโหมด watch สำหรับการพัฒนา

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    // เปิดโหมด watch (ค่าเริ่มต้น: false)
    watch: {},
  },
});