react-vite-best-practices
This skill provides React + Vite performance and build optimization guidance for Vite configuration, code splitting, and build tooling. It includes scripts that execute shell commands (execSync) to run sentry-cli and delete source maps and reads env vars like SENTRY_AUTH_TOKEN to interact with external services.
React + Vite Best Practices
Performance optimization guidelines for React applications built with Vite.
Overview
This skill provides comprehensive guidance for:
- Vite configuration optimization
- Build output optimization
- Code splitting strategies
- Development experience improvements
- Asset handling best practices
Categories
1. Build Optimization (Critical)
Configure Vite's build process for optimal production output.
2. Code Splitting (Critical)
Implement effective code splitting with React.lazy and dynamic imports.
3. Development Performance (High)
Optimize the development server and HMR for faster iteration.
4. Asset Handling (High)
Handle images, fonts, and other assets efficiently.
5. Environment Configuration (Medium)
Manage environment variables securely and type-safely.
6. HMR Optimization (Medium)
Ensure Hot Module Replacement works smoothly.
7. Bundle Analysis (Low-Medium)
Analyze and optimize bundle composition.
8. Advanced Patterns (Low)
SSR, library mode, and other advanced configurations.
Quick Start
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
build: {
target: 'esnext',
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
},
},
},
},
})
Usage
This skill triggers automatically when:
- Configuring Vite projects
- Optimizing React performance
- Setting up code splitting
- Reviewing build output