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