What problem does it solve?
Large JavaScript bundles significantly increase application load times, especially on slower networks, leading to a poor user experience and higher bounce rates. This Skill provides a systematic approach to analyzing and reducing bundle size, ensuring faster loading and improved performance.
Core Features & Use Cases
- Tree Shaking & Code Splitting: Guides on using named imports, dynamic imports, and lazy loading to remove unused code and split bundles into smaller, on-demand chunks.
- Minification & Compression: Ensures production builds are minified and served with Gzip/Brotli compression for maximum size reduction.
- Duplication Elimination: Helps identify and extract shared logic to prevent redundant code across modules, further reducing bundle size.
- Use Case: If your application's initial JavaScript bundle exceeds 200 KB, activate this Skill to identify the largest contributors. You'll then apply strategies like lazy loading heavy game modes or tree-shaking unused library functions to drastically reduce the bundle size and improve initial load performance.
Quick Start
1. Analyze dependencies for unused code:
npm run analyze:dependencies
2. Detect dead code (exports/functions never called):
npm run dead-code
3. Implement dynamic imports for heavy modules:
const loadModule = async () => {
const { MyHeavyModule } = await import('./MyHeavyModule.js');
Use MyHeavyModule
};
4. Ensure minification and Gzip/Brotli are active in your build/server configuration.
