JavaScript Bundle Size Analyzer

Larger JavaScript bundles mean more bytes to download, parse, and execute. On a median mobile device, each 1KB of gzip JavaScript requires ~1ms to parse. A 300KB gzip bundle adds ~300ms of parse time on top of download time. Lighthouse penalizes pages where main-thread JavaScript takes over 3.5 seconds to execute. Reducing bundle size directly improves Time to Interactive (TTI), First Contentful Paint, and Lighthouse scores.

Tree-shaking is the process of removing unused code (dead code elimination) from the final bundle. A tree-shakeable package exports functions individually, so bundlers (webpack, Rollup, esbuild, Vite) can include only what you import. For example, importing { format } from 'date-fns' adds ~2KB instead of the full 70KB library. Non-tree-shakeable packages (like moment.js) include everything regardless of what you use. Always prefer tree-shakeable alternatives.

Minified size is the JavaScript after removing whitespace, comments, and shortening variable names. Gzip size is the minified code after gzip compression — the actual bytes transferred over the network. Gzip typically reduces size by 60-80% for JavaScript. The number you care about for network performance is gzip size. Bundlephobia reports both, and the sizes shown here are approximate gzip estimates. Brotli compression (supported by modern browsers) can reduce sizes even further by ~15-20%.

Key strategies: 1) Code splitting — use dynamic import() to split routes, load on demand. 2) Replace heavy libraries — swap moment.js with date-fns/dayjs, lodash with native JS methods, axios with native fetch. 3) Lazy loading — load components only when needed. 4) Analyze your bundle — use webpack-bundle-analyzer or vite-bundle-visualizer to find the largest chunks. 5) Tree-shaking — import named exports, avoid default import of entire libraries. 6) CDN delivery — use CDN links to leverage browser caching across sites.

CDN links (jsDelivr, unpkg) serve pre-built files but add external HTTP requests and introduce network dependency. Bundling the library lets your bundler optimize, tree-shake, and split code. Modern best practices favor bundling with tree-shaking over CDN links for most packages. CDN makes sense for large, rarely-updated libraries (like Chart.js ~60KB) where HTTP/2 and browser caching provide benefits. For small utilities, always bundle and tree-shake.