Optimization configuration relying on pre-built dependencies

Performance Optimization: Dependency Pre-Bundling Configuration

Vite's dependency pre-bundling is a key mechanism for improving performance in both development and production environments. By converting CommonJS/UMD dependencies into ESM format and merging multiple small files, it significantly reduces the number of requests. Properly configuring pre-bundling can further optimize build speed and runtime efficiency.

Basic Principles of Pre-Bundling

When the Vite development server is first launched, it automatically scans project dependencies and performs pre-bundling. This process primarily accomplishes two tasks:

1. Converting non-ESM format dependencies into ESM
2. Merging multiple small files to reduce browser requests

The pre-bundling results are stored by default in the node_modules/.vite directory. This behavior can be modified via configuration:

// vite.config.js
export default defineConfig({
  cacheDir: './.vite_cache', // Change the pre-bundling cache directory
})

Manually Specifying Dependencies for Pre-Bundling

By default, Vite automatically detects dependencies that need pre-bundling, but sometimes manual specification is required:

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: [
      'lodash-es',
      'vue',
      'axios',
      'my-custom-dep' // Force inclusion of custom dependencies
    ],
    exclude: [
      'vue-demi' // Exclude dependencies that don't need pre-bundling
    ]
  }
})

Cache Control for Pre-Bundling

Proper cache configuration can significantly improve the development experience:

export default defineConfig({
  optimizeDeps: {
    // Force dependency re-bundling (development environment)
    force: process.env.NODE_ENV === 'development',
    
    // Disable filesystem caching
    cacheFilePath: false,
    
    // Custom cache invalidation strategy
    cacheKey: `${process.env.NODE_ENV}-${Date.now()}`
  }
})

Advanced Optimization Techniques

Dependency Preloading

export default defineConfig({
  optimizeDeps: {
    needsInterop: [
      'react-dom/server' // Dependencies requiring special handling
    ],
    esbuildOptions: {
      // ESBuild configuration options
      target: 'es2020',
      plugins: [
        // Custom ESBuild plugins
      ]
    }
  }
})

Multi-Page Application Optimization

For multi-page applications, pre-bundling can be split by page:

export default defineConfig({
  optimizeDeps: {
    entries: [
      'src/main.js',
      'src/admin/main.js',
      'src/user/main.js'
    ]
  }
})

Production-Specific Configuration

Pre-bundling strategies can be adjusted for production builds:

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

Debugging Pre-Bundling Issues

When encountering pre-bundling issues, debug using the following methods:

1. Run Vite with the --debug flag
2. Check metadata files in the .vite directory
3. Use the vite-plugin-inspect plugin

// vite.config.js
import inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [inspect()]
})

Customizing Pre-Bundling Behavior

For special requirements, the pre-bundling process can be fully customized:

export default defineConfig({
  async config() {
    const { scanImports } = await import('vite')
    const deps = await scanImports('src/main.js')
    
    return {
      optimizeDeps: {
        include: [...deps, 'extra-dep']
      }
    }
  }
})

Performance Metrics Monitoring

Integrate performance monitoring tools to evaluate pre-bundling effectiveness:

// vite.config.js
export default defineConfig({
  plugins: [
    {
      name: 'performance-metrics',
      configResolved(config) {
        if (config.command === 'serve') {
          process.env.PERF_METRICS = 'true'
        }
      }
    }
  ]
})

Integration with Other Build Tools

Ensure pre-bundling compatibility when using mixed build tools:

export default defineConfig({
  optimizeDeps: {
    disabled: false,
    // Coexistence with tools like Webpack
    holdUntilCrawlEnd: true
  }
})

Handling Special Dependency Cases

Certain dependencies may require special handling:

export default defineConfig({
  optimizeDeps: {
    extensions: ['.special'],
    esbuildOptions: {
      loader: {
        '.special': 'jsx'
      }
    }
  }
})