Ready to work offline!

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

bundle

a quick npm package size checker

Wait...

* Check the console for error messages.

* Note: Treeshaking is available, but since esbuild and rollup doesn't have access to each packages package.json, it assumes that there are sideEffects.


Usage

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://cdn.esm.sh/react
* esm:react -> https://cdn.esm.sh/react
* skypack:react -> https://cdn.skypack.dev/react
* unpkg:react -> https://unpkg.com/react
* jsdelivr:react -> https://cdn.jsdelivr.net/npm/react


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 cdn.skypack.dev but you can use the others.



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}

e.g.
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/animateThere is another way to share a reproduciable bundle, the sharable link. Shareble links look like this /?share=PTAEGEBsEsGMGtQCUCuA7UAzA9gJ1AC4AWApqAELoAmkJVoA1KALLRrSbR2OgDiAXtAAOQ7kICGCcQHMyAZ2j8SAKBIAPIXgKgAVFlzYAtqABEAAWzxoV7MHHtD4giRMBuIA 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.