Dependency Pre-Bundling in Vite

What is Dependency Pre-Bundling?

Dependency Pre-Bundling is a core optimization technique in Vite that converts and bundles dependencies into ESM (ECMAScript Modules) format before development starts. This process significantly improves application loading performance and development experience.

Why Pre-Bundle Dependencies?

1. ESM Conversion: Transforms CommonJS/UMD modules into ESM format
2. Performance Optimization: Reduces the number of HTTP requests during development
3. Caching Efficiency: Improves cache utilization for faster rebuilds
4. Consistency: Ensures consistent module resolution across the application

How Pre-Bundling Works

Vite automatically performs pre-bundling when:

• Starting the dev server for the first time
• Detecting changes in package.json dependencies
• Modifying vite.config.ts settings related to dependencies

The pre-bundled files are stored in node_modules/.vite and are cached for subsequent runs.

การทํางานของ Pre-bundling

Vite จะทําการ pre-bundle dependencies โดยอัตโนมัติเมื่อ:

• เริ่มต้น dev server ครั้งแรก
• มีการเปลี่ยนแปลงใน dependencies ใน package.json
• มีการเปลี่ยนแปลง vite.config.js ที่เกี่ยวข้องกับ dependencies

การกําหนดค่า Pre-bundling

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    // Force pre-bundling for specific packages
    include: ["lodash-es", "vue", "axios"],

    // Exclude packages from pre-bundling
    exclude: ["your-package"],

    // Additional entry points for dependency discovery
    entries: ["./src/**/*.ts"],

    // Advanced configuration
    esbuildOptions: {
      // Customize esbuild options
      target: "es2020",
      plugins: [],
    },
  },
});

ข้อควรระวัง

1. packages บางตัวอาจต้องระบุใน include เพื่อให้ทํางานได้ถูกต้อง
2. การ pre-bundle อาจใช้เวลานานในครั้งแรก แต่จะถูก cache ไว้
3. หากมีปัญหา สามารถลบ cache ได้ที่ node_modules/.vite

ตัวอย่างการใช้งาน

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    include: [
      "vue",
      "axios",
      "@vueuse/core",
      "lodash-es/get",
      "lodash-es/set",
      // Add other frequently used dependencies
    ],
  },
});

การ Debug Pre-bundling

เมื่อต้องการตรวจสอบว่า dependencies ใดถูก pre-bundle:

1. ดูที่ Terminal output เมื่อเริ่ม dev server
2. ตรวจสอบไฟล์ใน node_modules/.vite
3. ใช้ flag --debug เมื่อรัน dev server

Troubleshooting

1. Cache Issues: Delete node_modules/.vite and restart dev server
2. Missing Dependencies: Ensure all required packages are in package.json
3. TypeScript Errors: Verify type definitions are properly installed
4. Performance Problems: Use --profile flag to analyze build performance

Advanced Topics

• Customizing esbuild options
• Handling peer dependencies
• Optimizing large dependency trees
• Integrating with monorepo setups