bundle

A small online tool for checking the gzipped and minified size of npm packages.

I used monaco-editor for the code-editor, esbuild and rollup as bundler and treeshaker respectively, pako as a js port of the zlib and gzip libraries, pretty-bytes to convert the gzip size to human readable values, and countapi-js to keep track of the number of page visits, in a private and secure way.

This project was greatly influenced by the hardfist/neo-tools and mizchi/uniroll projects.

bundle is a quick and easy way to bundle your projects, minify and see it's gzip size. It's an online tool similar to bundlephobia, but bundle does all the bundling locally on you browser and can treeshake and bundle multiple packages (both commonjs and esm) together, all without having to install any npm packages and with typescript support.

The project isn't perfect, and I am still working on an autocomplete, hover intellisence, better mobile support and the high memory usage of esbuild and monaco as well as some edge case packages, e.g. monaco-editor.

If there is something I missed, a mistake, or a feature you would like added please create an issue or a pull request and I'll try to get to it. You can contribute to this project at okikio/bundle.

bundle uses Conventional Commits as the style of commit, and the Commitizen CLI to make commits easier.

You can join the discussion on github discussions.

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 bundle.js.org/?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, bundle.js.org?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=PTAEGEB... 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.

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...

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://bundle.js.org/badge-light.svg)](https://bundle.js.org/)

# Dark Mode Badge 
[![Open Bundle](https://bundle.js.org/badge-dark.svg)](https://bundle.js.org/)

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