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