slideshare/VITEBESTPRACTICES.md

# Vite Best Practices & Performance Guide

*Based on [Vite Performance Documentation](https://vite.dev/guide/performance)*

## Core Performance Principle
**"Reduce the amount of work for source files (JS/TS/CSS)"** to maintain performance as projects grow.

## Browser Setup

### Development Environment
- **Create a dev-only browser profile** without extensions
- **Use incognito mode** for faster performance
- **Don't disable browser cache** while using dev tools (it significantly slows down requests and HMR)

## Plugin Management

### Best Practices
- **Be cautious with community plugins** - they may impact performance
- **Dynamically import large dependencies** instead of importing them statically
- **Avoid long-running operations** in plugin hooks
- **Minimize file transformation time**

## Import and Resolve Optimization

### File Extensions
- **Be explicit with import paths** - use `import './Component.jsx'` instead of `import './Component'`
- **Narrow down `resolve.extensions` list** - don't include unnecessary file types
- Use common extensions first: `['.js', '.ts', '.jsx', '.tsx']`

### Module Imports
- **Avoid barrel files** that re-export multiple modules from index files
- **Import individual APIs directly** instead of from index files
- Example: Use `import { debounce } from 'lodash-es/debounce'` instead of `import { debounce } from 'lodash-es'`

## File Transformation

### Warmup Strategy
- **Use `server.warmup`** for frequently used files
- Pre-transform commonly accessed modules during dev server startup

### Native Tooling
- **Use native tooling when possible** for better performance
- Consider these alternatives:
  - **Rolldown** instead of Rollup
  - **LightningCSS** for CSS processing
  - **`@vitejs/plugin-react-swc`** for React projects

## CSS and Styling

### CSS Optimization
- **Use CSS instead of preprocessors** when possible (native CSS is faster)
- **Import SVGs as strings/URLs** rather than components when appropriate
- **Minimize unnecessary transformations**

## Performance Profiling

### Diagnostic Tools
- **Use `vite --profile`** to generate performance profiles
- **Use `vite --debug plugin-transform`** to inspect transformation times
- **Use tools like speedscope** to analyze bottlenecks

### Monitoring
- Track build times and identify slow transformations
- Monitor bundle sizes and chunk splitting effectiveness
- Profile HMR performance during development

## Import Strategies

### Dynamic Imports
```typescript
// Good: Dynamic import for large dependencies
const heavyLibrary = await import('heavy-library');

// Bad: Static import of large library
import heavyLibrary from 'heavy-library';
```

### Explicit Extensions
```typescript
// Good: Explicit file extension
import Component from './Component.jsx';

// Bad: Missing extension (requires resolution)
import Component from './Component';
```

### Direct API Imports
```typescript
// Good: Direct import
import { debounce } from 'lodash-es/debounce';

// Bad: Barrel import (imports entire library)
import { debounce } from 'lodash-es';
```

## Configuration Recommendations

### Resolve Extensions (in order of frequency)
```typescript
export default {
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json']
  }
}
```

### Server Warmup
```typescript
export default {
  server: {
    warmup: {
      clientFiles: ['./src/components/**/*.tsx', './src/utils/**/*.ts']
    }
  }
}
```

## Development vs Production

### Development Focus
- Fast HMR and dev server startup
- Minimal transformations
- Browser-friendly module resolution

### Production Focus
- Optimized bundle sizes
- Tree shaking effectiveness
- Code splitting strategies

## Key Takeaways

1. **Minimize transformations** - every transformation adds overhead
2. **Be explicit** - help Vite resolve files faster with explicit paths
3. **Use native tools** - they're typically faster than JavaScript alternatives
4. **Profile regularly** - identify and fix performance bottlenecks early
5. **Optimize imports** - direct imports are faster than barrel imports
6. **Consider browser setup** - development environment affects performance significantly