The fastest JavaScript is the JavaScript you never ship, and the rest of the bundle should still be smaller than you think. A practical strategy splits code into three categories: a vendor bundle that changes rarely and benefits from long cache lifetimes, an application bundle that changes more often, and route-level chunks that load only when needed. Code splitting implements this with dynamic import() or framework equivalents such as React.lazy wrapped in a Suspense boundary, both of which return a promise and split the chunk at the call site. Below the splitting layer, tree shaking removes unused exports from each bundle, but it relies on ES module syntax and side-effect-free declarations. CommonJS dynamic require calls cannot be statically analyzed, so they force bundlers to include the whole module.
The package.json sideEffects field tells bundlers which files have side effects on import, allowing them to delete exports more aggressively. Minification with Terser, esbuild, or swc typically reduces size by 30 to 60 percent. esbuild and swc trade a leaner feature set for much faster build times; Terser is the most mature and configurable but slowest. Source maps should be generated for debugging but excluded from production HTTP responses so that minified code is not trivially deobfuscated in production. Hash-based filenames such as app.[contenthash].js pair perfectly with long-lived caching because the URL changes whenever content changes. A bundle analyzer visualizes what is actually inside each chunk and quickly exposes duplicate dependencies, large libraries, and accidental imports of entire icon sets or full lodash.
Some specific packages are notorious bundle villains. Moment.js is orders of magnitude larger than date-fns, day.js, or luxon. Full lodash defeats tree shaking, but lodash-es or named imports from lodash/debounce preserve it. Massive icon libraries should be replaced with modular imports. Browser support for native APIs such as fetch and IntersectionObserver means most polyfills can be dropped entirely, and remaining polyfills should be served only to legacy browsers via differential serving, so the modern bundle stays lean. Library size audits via tools like bundle-phobia and package-size make cost visible before a dependency ships, and the general rule is that smaller libraries with focused APIs beat large all-in-one packages for performance.
Even with aggressive caching, smaller bundles still help on first visits and after cache eviction, and parse plus compile cost scales with bundle size every time the script runs, which is why shipping less code improves INP. Build tooling choices matter in development: Vite uses esbuild for fast dev startup and Rollup for production, while Webpack is more configurable but slower. Hot Module Replacement preserves state during edits and tightens the feedback loop. Bundle splitting per route ensures single-page applications only ship the code the current view needs, plus shared chunks for code reused across routes.