JavaScript Bundle Size

JavaScript bundle size is the total size of the script files a page must download and run. It is reported in two ways: transfer size after gzip or Brotli, and decompressed size, which is what the browser actually parses and executes.

Why it matters

JavaScript is the most expensive byte on the web. Unlike an image of the same size, it must also be parsed, compiled and executed on the main thread, which is slow on low-end phones. A 300 KB compressed bundle may expand to around 1 MB of code. Large bundles raise TBT and INP and delay interactivity.

Example

Typical reductions:

Before: main.js        950 KB (compressed 290 KB)
Tree-shake unused code        -  90 KB
Replace a date library        -  60 KB
Lazy-load charts on demand    - 140 KB
After:  main.js        660 KB (compressed 200 KB)

Bundler analyzers such as webpack-bundle-analyzer, source-map-explorer or the Vite visualizer show which packages take up space.

Common mistakes

• Importing a whole library for one function, such as the full lodash package.
• Measuring only the compressed size and ignoring execution cost.
• Shipping modern polyfills to browsers that do not need them.
• Duplicate dependencies appearing in several versions.

Related

• Code splitting
• Tree shaking
• Minification
• Bundler

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.