Dep Optimization ใน Vite (สำหรับมือใหม่)

Dep Optimization คืออะไร?

เวลาทำงานกับ Vite (โดยเฉพาะตอนพัฒนา) Vite จะต้องโหลด dependencies จาก node_modules เยอะมาก เช่น React, Vue, lodash ฯลฯ ถ้าโหลดทีละไฟล์จะช้า

Dep Optimization คือการ "pre-bundle" dependencies เหล่านี้ล่วงหน้า (เหมือนเตรียมวัตถุดิบก่อนปรุงอาหาร) เพื่อให้ Dev Server โหลดเร็วขึ้นมาก

---

ตัวอย่าง config ที่ใช้บ่อย

1. บังคับให้ optimize dependencies บางตัว

export default defineConfig({
  optimizeDeps: {
    include: ["lodash", "dayjs"], // บังคับ optimize ทันที
  },
});

2. ยกเว้น dependencies ไม่ให้ optimize

export default defineConfig({
  optimizeDeps: {
    exclude: ["some-legacy-lib"],
  },
});

3. บังคับ pre-bundle ใหม่ทุกครั้ง (เหมาะกับการ debug)

export default defineConfig({
  optimizeDeps: {
    force: true,
  },
});

---

อธิบายตัวเลือกสำคัญ (แบบมือใหม่)

• include: บอกชื่อ dependencies ที่ต้องการให้ Vite optimize ล่วงหน้า
• exclude: บอกชื่อ dependencies ที่ไม่ต้องการให้ optimize (เช่น library เก่า ๆ ที่ optimize แล้ว error)
• force: ให้ Vite pre-bundle dependencies ใหม่ทุกครั้ง ไม่ใช้ cache เก่า
• entries: ระบุ entry file ที่จะใช้สแกนหา dependencies (ปกติไม่ต้องตั้งเอง)
• esbuildOptions: ส่ง option เพิ่มเติมให้ esbuild ตอน pre-bundle (เช่น define ตัวแปร)

---

Q&A สำหรับมือใหม่

Q: ถ้าไม่ตั้งค่า optimizeDeps จะเกิดอะไรขึ้น? A: Vite จะ optimize dependencies ให้โดยอัตโนมัติอยู่แล้ว แต่ถ้าเจอปัญหา (เช่น import แล้ว error) ค่อยมาใช้ include/exclude

Q: ทำไม dev server ช้าหรือ reload บ่อย? A: อาจเพราะ dependencies เยอะหรือมีปัญหาเรื่องการ optimize ลองใช้ include/exclude หรือ force ดู

Q: ต้องตั้ง optimizeDeps ใน production ไหม? A: ส่วนใหญ่ใช้เฉพาะตอน dev เท่านั้น (dev server)

---

Vite จะทำการ pre-bundle dependencies เพื่อให้ Dev Server โหลดโมดูลได้เร็วขึ้น ตัวเลือก optimizeDeps ใช้ปรับแต่งการทำงานนี้:

optimizeDeps.entries

• ประเภท: string | string[]
• ค่าเริ่มต้น: สแกนไฟล์ .html ทั้งหมดและ entry ตาม build.rollupOptions.input
• คำอธิบาย: ระบุ pattern (tinyglobby) หรืออาร์เรย์ของ patterns สำหรับไฟล์/โฟลเดอร์ที่ต้องการให้ Vite สแกนหา dependencies ก่อนบันเดิล

optimizeDeps.exclude

• ประเภท: string[]
• ค่าเริ่มต้น: []
• คำอธิบาย: รายการ dependencies ที่ไม่ต้องการให้ pre-bundle เพื่อเลี่ยงปัญหาการ optimize

optimizeDeps.include

• ประเภท: string[]
• ค่าเริ่มต้น: []
• คำอธิบาย: บังคับให้ pre-bundle dependencies หรือแพ็กเกจที่ลิงก์อยู่นอก node_modules
  • รองรับ glob pattern สำหรับ deep imports เพื่อป้องกันการ bundling ใหม่เมื่อมีการ import ใหม่

optimizeDeps.esbuildOptions

• ประเภท: Omit<EsbuildBuildOptions, 'bundle' | 'entryPoints' | 'external' | 'write' | 'watch' | 'outdir' | 'outfile' | 'outbase' | 'outExtension' | 'metafile'>
• คำอธิบาย: ส่ง options ไปยัง esbuild ในขั้นตอน pre-bundle เช่น define, loader และอื่นๆ (some options omitted for compatibility)

optimizeDeps.force

• ประเภท: boolean
• ค่าเริ่มต้น: false
• คำอธิบาย: บังคับให้ทำ pre-bundle ใหม่โดยไม่ใช้ cache ของ dependencies เก่า

optimizeDeps.holdUntilCrawlEnd

• ประเภท: boolean
• ค่าเริ่มต้น: true
• Experimental
• คำอธิบาย: รอจนกระทั่งการสแกน static imports ทั้งหมดเสร็จสิ้นก่อนจึงคืนผลลัพธ์ เพื่อหลีกเลี่ยง full reload บน cold start

optimizeDeps.disabled

• ประเภท: boolean | 'build' | 'dev'
• ค่าเริ่มต้น: 'build'
• Deprecated, Experimental
• คำอธิบาย: ปิดระบบ pre-bundle ใน Dev Server (dev) หรือในขั้นตอน build (build) หรือทั้งสองเมื่อเป็น true

optimizeDeps.needsInterop

• ประเภท: string[]
• ค่าเริ่มต้น: []
• Experimental
• คำอธิบาย: บังคับให้ทำ ESM interop สำหรับ dependencies ที่ระบุ ช่วยลดการ reload เมื่อมีการ detect packaging ที่ซับซ้อน