What build tools does Vite use in development and production environments?

Vite uses different build strategies in development and production environments to provide optimal performance and experience in both scenarios:

Development Environment:

• Uses esbuild for dependency pre-bundling. esbuild is written in Go and extremely fast
• Leverages browser-native ES Modules (ESM) to load source code directly without bundling
• Serves files via HTTP server, browsers request modules on-demand
• Supports fast Hot Module Replacement (HMR), only compiling modified files
• Provides Source Maps for debugging

Production Environment:

• Uses Rollup for bundling and optimization
• Performs Code Splitting to split code into multiple chunks
• Performs tree-shaking to remove unused code
• Minifies and obfuscates code to reduce file size
• Generates optimized static assets including CSS extraction and compression
• Generates hash filenames for long-term caching

Why Different Strategies:

1. Performance Optimization: Development needs fast startup and response, production needs optimized loading speed and runtime performance

2. Feature Requirements: Development needs debugging and HMR, production needs optimization and compression

3. Compatibility: Production needs to consider browser compatibility, may require transpilation and polyfills

4. Build Tool Characteristics:

   • esbuild: Fast startup but less comprehensive optimization than Rollup
   • Rollup: Strong bundling optimization but slower startup

Configuration Differences:

• Development: Start dev server with vite command
• Production: Build production version with vite build, preview with vite preview

This dual-mode design allows Vite to achieve the best balance between development experience and production performance.