vite-bundle-optimization

SKILL.md

Vite Bundle Optimization

Table of Contents

When to Use

Instructions

Details

Source

Production-ready patterns for optimizing bundle size and build performance in Vite + React applications. These patterns leverage Vite's architecture (native ESM in dev, Rollup in production) to deliver smaller, faster bundles.

When to Use

Reference these patterns when:

Setting up a new Vite + React project for production

Analyzing bundle size with npx vite-bundle-visualizer

Build times are slow or bundles are unexpectedly large

Migrating from webpack/CRA to Vite

Optimizing Core Web Vitals (LCP, FID/INP, CLS)