What problem does it solve? Frontend projects built with Vite, React 19, and Ant Design often ship oversized bundles, slow first-screen loads, and unnecessary re-renders because of missing code splitting, full-library imports, and unoptimized rendering patterns. This Skill provides a systematic methodology to measure, diagnose, and fix these performance problems with verifiable before-and-after data. ## Core Features & Use Cases - Build Optimization: Configures Vite manualChunks vendor splitting, CSS code splitting, minification, and rollup-plugin-visualizer bundle analysis to cut first-screen JS by 30-50%. - Runtime Rendering Fixes: Identifies unnecessary re-renders and applies React.memo, useMemo-derived state, and Context splitting for React 19 concurrent rendering. - Resource Loading & Dependency Slimming: Implements route-level lazy loading with React.lazy and Suspense, on-demand ECharts registration, and path-based lodash imports to shrink heavy dependencies like echarts (61M) and handsontable (31M). - Use Case: Your Vite + antd + echarts dashboard takes 8 seconds to load. Run this Skill to generate a baseline bundle report, split vendor chunks, lazy-load non-homepage routes, and deliver a graded optimization report with FCP/LCP comparisons. ## Quick Start Analyze my Vite React project's build output and produce a prioritized frontend performance optimization plan with before-and-after bundle size data.
