React Vite Best Practices

A solid reference for keeping your React and Vite setup fast. It covers the essentials: manual chunk splitting to separate vendor code, route-based lazy loading with Suspense boundaries, HMR configuration, and asset optimization strategies. The 23 rules are organized by impact (build optimization and code splitting flagged as critical), which helps you prioritize. Includes ready-to-use vite.config.ts snippets and patterns for dynamic imports. Most useful during initial project setup or when your bundle size creeps up and you need a systematic audit. The rules assume you understand React and Vite basics but need specific guidance on what actually moves the performance needle versus cargo cult optimization.

skills.sh installs: 3K
GitHub stars: 102
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add asyrafhussin/agent-skills --skill react-vite-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

React + Vite Best Practices

Comprehensive performance optimization guide for React applications built with Vite. Contains 23 rules across 6 categories for build optimization, code splitting, development performance, asset handling, environment configuration, and bundle analysis.

Metadata

Version: 2.0.0
Framework: React + Vite
Rule Count: 23 rules across 6 categories
License: MIT

When to Apply

Reference these guidelines when:

Configuring Vite for React projects
Implementing code splitting and lazy loading
Optimizing build output and bundle size
Setting up development environment and HMR
Handling images, fonts, SVGs, and static assets
Managing environment variables across environments
Analyzing bundle size and dependencies

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Build Optimization	CRITICAL	`build-`
2	Code Splitting	CRITICAL	`split-`
3	Development	HIGH	`dev-`
4	Asset Handling	HIGH	`asset-`
5	Environment Config	MEDIUM	`env-`
6	Bundle Analysis	MEDIUM	`bundle-`