Optimiseur de Taille de Bundle

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.