Vite Dependency Optimization API

Vite มีระบบ Dependency Optimization ที่ช่วยให้การโหลด dependencies เร็วขึ้นโดยการประมวลผลล่วงหน้า (pre-bundling) ในส่วนนี้เราจะมาดูวิธีการกำหนดค่าต่างๆ สำหรับการ optimize dependencies

optimizeDeps.entries

กำหนดจุดเข้า (entry points) สำหรับสแกน dependencies ช่วยให้ Vite วิเคราะห์ dependencies ได้แม่นยำยิ่งขึ้น

vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    // ระบุ path ไปยังไฟล์ entry points
    entries: [
      "./src/main.ts",
      "./src/another-entry.ts",
      // ระบุ glob pattern ได้
      "**/*.page.vue",
    ],
  },
});

vite.config.js

export default {
  optimizeDeps: {
    entries: [
      "./src/main.js",
      "./src/another-entry.js",
      "**/*.page.vue",
    ],
  },
};

optimizeDeps.exclude

ระบุ dependencies ที่จะไม่ถูก optimize ใช้เมื่อต้องการยกเว้น packages ที่ไม่จำเป็นต้อง optimize

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    // ระบุชื่อ package ที่ไม่ต้องการให้ optimize
    exclude: [
      "package-to-exclude",
      "@scope/package-name",
      // ระบุ subpath ได้
      "package-with-css/dist/style.css",
    ],
  },
});

optimizeDeps.include

บังคับให้ optimize dependencies ที่ระบุ ใช้เมื่อ Vite ไม่สามารถตรวจจับ dependencies ได้อัตโนมัติ

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    include: [
      // ระบุชื่อ package ที่ต้องการ optimize
      "lodash",
      // ระบุ subpath ได้
      "my-package/dist/utils",
      // ระบุ module ที่ไม่ใช่ JavaScript
      "my-package/dist/style.css",
    ],
  },
});

optimizeDeps.esbuildOptions

กำหนดค่าสำหรับ esbuild ที่ใช้ optimize ช่วยปรับแต่งกระบวนการ optimization ให้เหมาะสม

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      // ระบุ target JavaScript version
      target: "es2020",

      // กำหนด define สำหรับการแทนที่ค่าต่างๆ
      define: {
        "process.env.NODE_ENV": "\"development\"",
      },

      // ระบุ plugins สำหรับ esbuild
      plugins: [
        // ตัวอย่าง plugin
      ],

      // เปิด sourcemap สำหรับ debugging
      sourcemap: true,

      // กำหนด log level
      logLevel: "info",
    },
  },
});

optimizeDeps.force

บังคับให้ optimize dependencies ใหม่ทั้งหมด ใช้เมื่อมีการเปลี่ยนแปลง dependencies หรือเคลียร์ cache

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    // เปิดโหมด force ใน development เท่านั้น
    force: process.env.NODE_ENV === "development",
  },
});

optimizeDeps.holdUntilCrawlEnd

ควบคุมเวลาเริ่มกระบวนการ optimize ช่วยรวบรวมข้อมูล dependencies ได้ครบถ้วนก่อนเริ่ม

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    // รอจนกว่าการสแกน dependencies จะเสร็จสมบูรณ์ก่อน optimize
    holdUntilCrawlEnd: true,
  },
});

optimizeDeps.disabled

ปิดการใช้งาน dependency optimization ทั้งหมดหรือบางส่วน มีประโยชน์เมื่อต้องการ debug หรือทดสอบการทำงาน

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    // 'build' - ปิดการ optimize ตลอดเวลา
    // 'dev' - ปิดเฉพาะในโหมด development
    // false - เปิดการทำงานปกติ
    disabled: process.env.NODE_ENV === "production" ? false : "dev",
  },
});

optimizeDeps.needsInterop

ระบุ dependencies ที่ต้องการ interop ระหว่าง CommonJS และ ESM ช่วยให้ทำงานร่วมกับ packages รูปแบบต่างๆ ได้

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    // ระบุชื่อ package ที่ต้องการให้ใช้ interop
    needsInterop: [
      "some-commonjs-package",
      "another-package",
    ],
  },
});