vite-bundle-optimization

Name: vite-bundle-optimization
Availability: InStock
Author: trungenglish

Optimizes Vite and React bundle size through code splitting, lazy loading, and build configuration.

1|Updated Jul 4, 2026

Search Tags:#react #tree shaking #lazy loading #code splitting #vite #bundle optimization #build performance

Ready to run

npx skills add https://github.com/trungenglish/SHOPWISE --skill vite-bundle-optimization-trungenglish

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vite-bundle-optimization
Source: https://github.com/trungenglish/SHOPWISE/tree/main/.agents/skills/vite-bundle-optimization
Command: npx skills add https://github.com/trungenglish/SHOPWISE --skill vite-bundle-optimization-trungenglish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Vite and React applications often ship oversized bundles and suffer slow builds due to barrel file imports, unchunked vendor code, and render-blocking third-party scripts, hurting Core Web Vitals and developer experience. ## Core Features & Use Cases - Bundle Size Reduction: Eliminate barrel file imports, configure manual chunk splitting, and apply route-level code splitting with React.lazy. - Build Performance Tuning: Configure dependency pre-bundling, compression (gzip/brotli), image optimization, and the React Compiler for automatic memoization. - Use Case: When your Vite app's initial bundle exceeds 200KB gzipped and LCP is slow, run `npx vite-bundle-visualizer`, then apply manualChunks for vendor libraries and lazy-load below-the-fold components like charts and editors. ## Quick Start Analyze my Vite project's bundle and apply code splitting and lazy loading to reduce the initial bundle size.

Frequently Asked Questions about vite-bundle-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I reduce Vite bundle size in a React app?▼

Start by running npx vite-bundle-visualizer to identify large chunks. Then eliminate barrel file imports, configure manualChunks to split vendor code, and use React.lazy with dynamic imports for route-level code splitting.

How to configure code splitting in Vite with manualChunks?▼

Add build.rollupOptions.output.manualChunks in vite.config.ts to group dependencies into separate chunks, such as vendor-react for react and react-dom. This improves caching since vendor code changes less frequently than app code.

Why are barrel file imports slow in Vite?▼

Barrel files force the bundler to load the entire module graph even when you import one export, adding 200-800ms to startup. Use direct imports or vite-plugin-barrel to transform barrel imports into direct imports at build time.

Does Vite compress build output by default?▼

No, Vite does not compress output by default. Add vite-plugin-compression with gzip and brotliCompress algorithms to generate .gz and .br files, then configure your server to serve them.

Can I use the React Compiler with Vite?▼

Yes, add babel-plugin-react-compiler to the Babel plugins of @vitejs/plugin-react in vite.config.ts. It requires React 19 and automatically handles memoization, replacing manual useMemo and useCallback calls.