Ready to work offline!

New content is available. Click OK to refresh all open tabs.

bundle - a quick npm package size checker


a quick npm package size checker

Bundled in ...
0 Kb


When bundling packages that also export CSS and other external files, now checks the gzip 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 since esbuild and rollup don't have direct access to each packages package.json, there might be slight package version conflicts.
Check the console for error messages and warnings.

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


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

* If an error occurs try using a different CDN, by default bundle uses 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";

URL Queries & Shareable Links

You can now use search queries in bundle, all you need to do is add this to the url
?q={packages}&treeshake={methods to treeshake}

You want react, react-dom, vue, and @okikio/animate, but only want the Animate and toStr methods exported from @okikio/animate.

You would add this to the url ?q=react,react-dom,vue,@okikio/animate&treeshake=[*],[*],[*],[{Animate,toStr}]

If you only want a couple packages and don't care to treeshake, then all you need is something like this,?q=react,react-dom,vue,@okikio/animate. There is another way to share a reproduciable bundle, the sharable link. Shareble links look like this /?share=PTAEGEBs... with the string value of the input code editor being compressed into a string and placed into the URL.

In order to create a shareble link, you click the Share button, it copies the share url to your clipboard, and from there you can paste where you wish.

Auto-bundling shared URL's

If you would like to bundle your code when the share URL is loaded, add bundle to the url, e.g. /?bundle&q=@okikio/animate or /?bundle&share=PTAEGEBs...


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

All you need to do is to add this to your
# Light Mode Badge 
[![Open Bundle](](

# Dark Mode Badge 
[![Open Bundle](](

You can use the URL Queries & Shareable Links above, to create unique bundles, when users clicks on the badge.

👋 00000 visits