No logs...
bundlejs
a quick npm package size checker
Console
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.
✨ Update ✨ bundlejs.com is the new official domain for bundlejs
.
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://cdn.esm.sh/react
- esm:react -> https://cdn.esm.sh/react
- 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";
Sharing
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/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...
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 toreact-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/)
You can use the Sharing section above, to create unique bundles, when users clicks on the badge.
Community
Tweet at me on @okikio_dev with what you love and what you think needs improvement in bundle
to get added to the list users.
- @sheetjs
- @daniguardio_la
- And more, etc...
Discus
Note You can also use bundlesize.com to access bundlejs
.
Special thanks to @sheetjs and @daniguardio_la for donating to bundle
on OpenCollective.