Webpack Bundle Size Estimator

Sizes come from bundlephobia.com which measures the actual minified + gzipped output for each package. The tree-shaking and partial import savings are approximations (40% and 70% reduction respectively) — actual savings depend on your webpack/rollup config, which parts you import, and whether the library is written as ESM. Use these as planning estimates, not exact figures.

Tree-shaking is dead-code elimination — your bundler removes exports you never import. It only works on ESM (ES Modules) packages with a module field in package.json. Packages like moment, jquery, and most CJS-only packages cannot be tree-shaken. Lodash-es (the ESM version of lodash) is fully tree-shakeable; lodash (CJS) is not.

Partial import means you only import specific functions, not the entire library. For example, import format from 'date-fns/format' instead of import { format } from 'date-fns'. This is especially effective for large utility libraries like lodash, date-fns, and Material UI where you may only use 5-10% of the API surface.

These estimates assume the JS must be downloaded from scratch (no cache). Real-world load time depends on CDN caching (repeat visitors get cached bundles), HTTP/2 multiplexing, and how the JS is chunked. Focus on the 3G estimate as a worst-case mobile scenario — if it is over 5 seconds, consider code-splitting.

webpack-bundle-analyzer generates a visual treemap of your actual bundle. Install it: npm install --save-dev webpack-bundle-analyzer. Add to webpack.config.js: const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin. Then add new BundleAnalyzerPlugin() to your plugins array. Run webpack to open the visual report showing exactly which packages take the most space.

1. Code-split with dynamic import() so each route only loads what it needs. 2. Replace heavy libraries with lightweight alternatives (moment→dayjs, lodash→lodash-es, MUI→shadcn/radix). 3. Use partial imports for utility libraries. 4. Enable tree-shaking (ESM-only packages). 5. Use a CDN for large stable dependencies. 6. Audit with webpack-bundle-analyzer to find duplicate packages.