react-vite-best-practices

This skill provides a comprehensive performance optimization framework for modern React applications scaffolded with Vite. It is designed for frontend developers and software engineers aiming to achieve high-performance build outputs, fast development cycles, and efficient resource delivery. The guidelines consolidate best practices for the entire React and Vite ecosystem, ensuring that production bundles remain lean, scalable, and responsive while maintaining a smooth developer experience during the local build and HMR phases. By following these rules, teams can ensure their architectural choices align with current industry standards for modern web development.

• Build Optimization: Strategies for manual chunking, OXC or Terser minification, tree-shaking, and modern browser targeting to minimize bundle size.

• Code Splitting: Implementation of route-based lazy loading, strategic React Suspense boundaries, and dynamic imports to reduce initial page load times.

• Development Efficiency: Best practices for configuring Vite's optimizeDeps, leveraging React Fast Refresh, and tuning Hot Module Replacement (HMR) server settings.

• Asset Handling: Guidelines for optimized image delivery, converting SVGs into React components using SVGR, efficient web font loading, and public directory management.

• Environment Management: Standardizing the use of VITE_ prefixes, mode-specific environment variables, and strictly preventing the exposure of sensitive data in client-side code.

• Bundle Analysis: Integration of rollup-plugin-visualizer to track dependencies and identify opportunities for further code splitting or package removal.

• Usage: Apply these rules when refactoring existing components, setting up new Vite configurations, or auditing performance metrics. Use the provided rules to guide discussions during code reviews or pull request evaluations.

• Inputs/Outputs: The skill expects inputs related to React components, vite.config.ts files, or build process questions. Outputs include actionable code snippets, configuration adjustments, and performance impact explanations.

• Constraints: Primarily designed for React 18+ and Vite 5+ workflows; some specific plugin recommendations may vary based on exact project dependencies. Always verify compatibility with your current production build environment before applying major architectural changes.