skills.rest
trungenglish
trungenglishCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vite-bundle-optimization

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
One-click install
npx skills add https://github.com/trungenglish/SHOPWISE --skill vite-bundle-optimization-trungenglish
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
F1shiftF1shift

web-artifacts-builder

Automate React, TypeScript, Vite, and Tailwind CSS web artifact creation for claude.ai.

Community
Advanced
personamanagmentlayerpersonamanagmentlayer
41

nginx-expert

Configure Nginx for reverse proxy, load balancing, SSL/TLS, and caching.

Official
Advanced
simoabidsimoabid
1

performance-profiling

Measure Core Web Vitals and analyze runtime and bundle sizes with Lighthouse CLI.

Community
Intermediate
PlazaCCPlazaCC
2

supabase

Guide Supabase auth, database, edge functions, and storage with best practices.

Official
Advanced