bundlejs - Online bundler + npm package size checker

bundlejs

a quick npm package size checker

Changelog (July 8, 2023): The subtle shift in bundlejs' behaviour with ESM & CJS

✨ WOOOH! ✨ The official bundlejs API is out, you can access it via deno.bundlejs.com and/or edge.bundlejs.com. The new API also comes with proper badges

Wait...

Console
No logs...

Wait...

Analysis

Enable the analysis config to view the size of output files with interactive zoomable charts.

{
  "analysis": "treemap" | "network" | "sunburst" | true | false,
  "esbuild": { ... }
}

Nothing to analyze...

📑 Official Docs for bundlejs are now available.

Special thanks to @upstash for sponsoring the bundlejs API.

A link to bundlejs.com's Product Hunt page; a small public display of what bundlejs.com is all about

Usage

When bundling packages that also export CSS and other external files, bundlejs.com now checks the gzip/brotli size of these external files, even though it won't output any code. Keep this in mind this isn't a bug, however, if it causes confusion I am willing to change this behaviour.

Treeshaking is available, but not all CDNs support access to each packages package.json so there might be slight package version conflicts. The only verified CDN with access to the package.json is unpkg.com.

Check the console for error messages and warnings.

You can use custom protocols to specify which CDN the module should come from.

esm.run:react -> https://esm.run/react
esm.sh:react -> https://esm.sh/react
esm:react -> https://esm.sh/react
jsr:@oxi/result -> https://esm.sh/jsr/@oxi/result
skypack:react -> https://cdn.skypack.dev/react
unpkg:react -> https://unpkg.com/react
deno:preact -> https://deno.land/x/preact
jsdelivr:react -> https://cdn.jsdelivr.net/npm/react
jsdelivr.gh:facebook/react/packages/react-dom/index.js -> https://cdn.jsdelivr.net/gh/facebook/react/packages/react-dom/index.js
github:facebook/react/main/packages/react/index.js -> https://raw.githubusercontent.com/facebook/react/main/packages/react/index.js

e.g.

import { toStr } from "skypack:@okikio/animate";
// or
export * from "esm:@okikio/animate"; 
// or 
export { animate } from "https://cdn.skypack.dev/@okikio/animate";

* If an error occurs try using a different CDN, by default bundle uses unpkg.com but you can use the others.

* For some packages an error occurs where the default export is excluded from the treeshaken bundle, the solution for this is to manually include the default export like so,

export * from "solid-dismiss";
// and
export { default } from "solid-dismiss";

Externals

Externals allow you to mark certain modules as modules to exclude from resolving, loading, and bundling, you use it the way you'd use the esbuild externals config option, e.g.

{
  "esbuild": {
    "external": ["react", "react-dom"],
  }
}

You can try it out below, bundlejs.com/?config={"esbuild":{"external":["@okikio/animate"]}}.

Check out a complex example of using the external config bundlejs.com/?q=@babel/core&config={"esbuild":{"external":[...]}}

Aliases

Aliases act as a redirect for modules, they are for replacing packages with different ones, e.g. replace fs with memfs, so, it can work on the web, etc..

You use aliases like this

{
  "alias": {
    "@okikio/animate": "react-dom"
  }
}

You can try out an example of using aliases, bundlejs.com/?config={"alias":{"@okikio/animate":"react-dom"}}.

⚠️ Warning: aliases currently don't care about the original packages version, e.g. @okikio/animate@beta will be redirected to react-dom regardless of the package version in use.

Badges

You can also add bundle badges, they look like this,

All you need to do is to add this to your README.md

# Light Mode Badge 
[![Open Bundle](https://bundlejs.com/badge-light.svg)](https://bundlejs.com/)

# Dark Mode Badge 
[![Open Bundle](https://bundlejs.com/badge-dark.svg)](https://bundlejs.com/)

Another options is to use the API, e.g.

[![spring-easing's badge](https://deno.bundlejs.com/?q=spring-easing&badge=detailed&badge-style=for-the-badge)](https://bundlejs.com/?q=spring-easing)

You can use the Sharing section above and the 📑 Official Docs to learn how to create unique bundles via badges.