Bundlephobia is an amazingly wonderful site that lets us know how big bundles are before using them.

https://bundlephobia.com/

"🏋️ find the cost of adding a npm package to your bundle" https://github.com/pastelsky/bundlephobia

While it's not much publicized, there's an API exposed to get some details for a given package:

https://bundlephobia.com/api/size?package=<package-name>

For example, the latest version of react-query returns the following values: https://bundlephobia.com/api/size?package=react-query:

json
1{
2  "assets": [
3    {
4      "gzip": 6104,
5      "name": "main",
6      "size": 19909,
7      "type": "js"
8    }
9  ],
10  "dependencyCount": 2,
11  "dependencySizes": [
12    {
13      "approximateSize": 31288,
14      "name": "react-query"
15    }
16  ],
17  "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
18  "gzip": 6104,
19  "hasJSModule": "dist/react-query.mjs",
20  "hasJSNext": false,
21  "hasSideEffects": false,
22  "name": "react-query",
23  "peerDependencies": ["react"],
24  "repository": "https://github.com/tannerlinsley/react-query.git",
25  "scoped": false,
26  "size": 19909,
27  "version": "1.3.4"
28}

As you can tell, we can get some useful details from this API 🤯!

You may be predicting the next step 💡, but I thought it would be helpful to create a component to show these details for a given package, with up-to-date details. Enter bundlephobia-inline, <BundlephobiaInline />, and useBundlephobia()!

jsx
1import BundlephobiaInline from "bundlephobia-inline";
2
3<BundlephobiaInline packageName="react-query" />;

I like that! 🤩

What about other components?

The basic BundlephobiaInline component is super-opinionated and likely isn't what you'll want for every project. Instead, the bundlephobia-inline package also exposes the useBundlephobia hook for a wrapper around the bundlephobia API using react-query!

jsx
import { useBundlephobia } from "bundlephobia-inline";

With some simple tweaking, you can even configure .mdx files to render bundlephobia codeblocks using this<BundlephobiaInline /> component.

More on that in the next post...