bundle-optimizer

Reduce bundle size by analyzing your JavaScript with tools like webpack-bundle-analyzer to identify large modules, then apply code splitting with dynamic imports and tree-shaking to eliminate dead code. This cuts initial payload and speeds up first paint.

Code splitting breaks your bundle into smaller chunks loaded on demand via dynamic imports, reducing initial load time. Tree-shaking removes unused code during the build process. Both are complementary techniques that minimize bundle size and improve performance.

Rollup and webpack serve different purposes—webpack is a module bundler, Rollup excels at library bundling and tree-shaking. You typically choose one as your primary bundler. This Skill covers configuration for both to achieve your gzipped size targets and performance goals.

Use depcheck to scan your project and find unused dependencies, then remove them from package.json. Combine this with webpack-bundle-analyzer to visualize what's actually included in your bundle and confirm unused code is eliminated.

Progressive loading delivers a minimal initial bundle for fast first paint, then lazy-loads additional features as needed. Implement it when your website's initial load is slow due to large bundles, using dynamic imports to defer non-critical code.

This Skill applies to scenarios with large bundles and slow first paint regardless of project structure. It guides dynamic imports, dependency pruning, and build-configuration optimizations to meet gzipped size targets across your architecture.