What Is bundlejs? Checking npm Package Size in the Browser

What is bundlejs and what does it do?

bundlejs is a browser-based tool for checking how big a JavaScript package will be once it is bundled. The site describes itself as a quick and easy way to bundle, minify, and compress your ts, js, and npm packages all online, and it points visitors to its main site for more information. You open it in a tab, type a package name, and read the result without installing anything on your machine.

The directory files it under Development Tools as bundle.js, and it is free, installable from the browser, and not listed as working offline. The tool is pitched around one clear use case: check the bundle size of any npm package before installing it, with instant size stats for the minified and gzipped output. It is aimed at anyone trying to keep JavaScript bundles lean.

In other words, bundlejs answers one narrow question quickly: how much weight does this dependency add? It does not replace reading a package's documentation or trying it in a project, but it gives you a number to react to in a few seconds. If you have ever added a library for one small helper and then wondered why a build grew, this is the check that comes first.

How do you check a package's bundle size?

Open the app at its address, enter the name of the npm package you are considering, and wait for the stats to appear. The tool is described as giving instant size stats, with minified and gzipped figures for the package. Because it runs in a tab, it suits a quick look while you are still reading a package's readme or comparing a few options in a pull request discussion.

Check the candidates one after another rather than guessing. If you are choosing between two libraries that solve the same problem, type each name in turn and compare the minified and gzipped results side by side in your own notes. Run the check before npm install, not after, since the whole point of the tool is to inform that decision while it is still cheap to change your mind.

If you want to go further, the site presents itself as a place to bundle, minify, and compress your own ts and js code too, not only published packages. That makes it a handy scratchpad. When you need a place to try a package with real code, a browser IDE such as StackBlitz runs Node.js in the tab and lets you run npm packages without installation.

What do the numbers represent?

The two figures bundlejs reports are minified size and gzipped size. Minified means the code has had whitespace stripped and names shortened, and gzipped means that minified file after a further compression step. The gzipped figure is the closer guide to how much is transferred, while the minified figure shows the size of the code itself. Seeing both together gives you a fuller picture than either alone.

The numbers describe a bundle: the package plus whatever it pulls in, packed together the way a bundler would. That is why they can differ from the size of the package folder you see after installing, which contains source files, documentation and other things that never reach a browser. Treat the result as the weight of that package as a user's browser would receive it.

Because the figures are a snapshot, note exactly which package you entered when you compare results, and check again after a major upgrade since a new release can change them. Write the numbers down next to the package name in your decision notes so a teammate can see what you saw and repeat the check themselves in a few seconds.

What does bundlejs not do?

bundlejs reports size. It does not tell you how fast a package runs, how much memory it uses, or how a page will feel to a visitor, and the figures should not be read as a performance verdict. A small package can be slow to execute and a larger one can be perfectly quick, so size is only one input into a sensible choice.

It also does not promise tree-shaking outcomes in your own project. Whether unused exports are dropped depends on how a package is written and how your build tool is configured, so the number on screen is not a promise of what your production build will contain. If a library is split into many small entry points, test the exact import you plan to use.

Nor does it judge a package's quality, licence, maintenance or security. A tiny package can be abandoned and a large one can be excellent. Use the size result next to the usual checks you would make, and remember the tool is not listed as working offline, so you need a connection to run it.

How should you read results before adding a dependency?

Start with a question about the job: what does this dependency replace? If it replaces a few lines of your own code, a visible gzipped cost is hard to justify. If it replaces a complex feature you would otherwise write and maintain yourself, the same cost may be fair. Size is a cost to weigh, not a verdict.

Compare alternatives with the same method, note the minified and gzipped numbers, and prefer the leaner option when two packages do the same job equally well. For a wider kit of browser tools, see the Development Tools PWAs guide, and the SVGOMG guide shows the same keep-it-small habit applied to SVG files.

Open the bundlejs listing to launch the tool; it appears as bundle.js, free to use and installable from the browser. Once a package passes the size check, try it with real code in StackBlitz, where you can run npm packages without installation, and only then add it to your project. Size first, trial second, install last is a sound order.

Frequently asked