Vite

Vite Best Practices

Comprehensive performance optimization guide for Vite applications. Contains 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

• Configuring Vite for a new project
• Troubleshooting slow dev server startup
• Optimizing production bundle size
• Debugging HMR issues
• Writing or evaluating Vite plugins
• Migrating from Webpack or other bundlers

Rule Categories by Priority

Quick Reference

1. Dependency Pre-bundling (CRITICAL)

• deps-include-large-cjs - Include large dependencies with many modules
• deps-exclude-esm - Exclude small ESM dependencies
• deps-force-rebundle - Use --force flag for dependency changes
• deps-hold-until-crawl - Configure holdUntilCrawlEnd for startup behavior
• deps-entries - Configure custom entry points for discovery
• deps-linked-packages - Handle linked dependencies in monorepos

2. Plugin Performance (CRITICAL)

• plugin-lazy-imports - Use dynamic imports in plugin code
• plugin-avoid-long-hooks - Avoid long operations in startup hooks
• plugin-transform-early-return - Early return in transform hooks
• plugin-audit-community - Audit community plugins for performance
• plugin-swc-over-babel - Use SWC instead of Babel for React

3. Bundle Optimization (CRITICAL)

• bundle-manual-chunks - Use manualChunks for vendor splitting
• bundle-dynamic-imports - Use dynamic imports for route-level splitting
• bundle-analyze - Analyze bundle composition
• bundle-tree-shaking - Enable effective tree-shaking
• bundle-chunk-warning - Address large chunk warnings
• bundle-compression - Disable compressed size reporting for large projects
• bundle-asset-inlining - Configure asset inlining threshold

4. Import Resolution (HIGH)

• import-avoid-barrel - Avoid barrel file imports
• import-explicit-extensions - Use explicit file extensions
• import-path-aliases - Configure path aliases for clean imports
• import-svg-strings - Import SVGs as strings instead of components
• import-glob-patterns - Use glob imports carefully

5. Build Configuration (HIGH)

• build-modern-target - Target modern browsers
• build-minification - Use esbuild for minification
• build-sourcemaps - Disable source maps in production
• build-css-code-split - Enable CSS code splitting
• build-rolldown - Consider Rolldown for faster builds
• build-output-dir - Configure output directory and caching

6. Development Server (MEDIUM-HIGH)

• dev-server-warmup - Warm up frequently used files
• dev-browser-cache - Keep browser cache enabled in DevTools
• dev-fs-limits - Increase file descriptor limits on Linux
• dev-wsl-polling - Use polling for WSL file watching
• dev-https-proxy - Configure HTTPS and proxy for development

7. CSS Optimization (MEDIUM)

• css-lightning - Use Lightning CSS instead of PostCSS
• css-avoid-preprocessors - Prefer CSS over preprocessors when possible
• css-modules - Use CSS Modules for component styles
• css-inline-critical - Extract critical CSS for initial paint

8. Advanced Patterns (LOW-MEDIUM)

• advanced-ssr-externalize - Externalize dependencies for SSR
• advanced-env-static - Use static environment variables
• advanced-profiling - Profile build performance
• advanced-lib-mode - Configure library mode for package development

How to Use

Read individual reference files for detailed explanations and code examples:

• Section definitions - Category structure and impact levels
• Rule template - Template for adding new rules

Reference Files