Npm Package Size Calculator

Three different numbers get described as a package size, and confusing them leads to bad decisions. Install size is what npm writes into node_modules, including source, type definitions, README files, and frequently tests and source maps. Minified size is the code after a tool such as Terser or esbuild strips whitespace and comments and shortens local identifiers. Gzipped size is that minified output after HTTP compression, and it is the only figure corresponding to bytes actually crossing the network. A typical progression is roughly 3:1 from raw to minified and a further 3:1 to 4:1 from minified to gzipped, so a 200 KB package may transfer as about 25 KB. Transfer is often not the dominant cost. JavaScript must also be parsed, compiled, and executed on the main thread, and a mid-range mobile phone processes on the order of 1 MB of uncompressed JavaScript per second, several times slower than a desktop machine. That is why 100 KB of JavaScript costs far more than 100 KB of an image, and why Lighthouse reports Total Blocking Time separately from load time. A widely cited target is roughly 170 KB of gzipped JavaScript for a page expected to become interactive quickly on a median mobile device over a mid-range connection. The main caveat here is that this estimate assumes the entire package enters the bundle. A tree-shakeable library imported for a single function may add far less, while a package published only as CommonJS cannot be tree-shaken and contributes its full weight.

npm was written by Isaac Z. Schlueter and first released in January 2010, shortly after Ryan Dahl introduced Node.js in 2009. Node deliberately shipped a minimal standard library, so a package manager became the mechanism through which most functionality reached developers. The registry grew from a hobby project on a single server into the largest software registry in existence; npm, Inc. was founded in 2014 to operate it, and GitHub acquired the company in 2020. Bundle size became a mainstream concern only when registry packages migrated from Node servers into browsers. Browserify, released by James Halliday in 2011, and webpack, created by Tobias Koppers in 2012, made it routine to ship npm code to clients, and bundles grew accordingly. Rich Harris introduced Rollup in 2015 and popularized the term tree shaking, borrowed from earlier Lisp compiler practice, for eliminating unreferenced exports. The technique depends on the static import and export syntax standardized in ECMAScript 2015. Measurement tools followed the problem. Bundlephobia, created by Shubham Kanodia in 2017, made minified and gzipped sizes visible before installation, and webpack-bundle-analyzer visualized what a build actually shipped. The performance budget figure most often quoted traces to Alex Russell 2017 analysis of real-world mobile performance, and Google web.dev guidance has repeated comparable thresholds since.