Bundlejs: An Online Esbuild-Based Bundler

Introduction (pronounced ) is a quick and easy way to tree shake, bundle, minify, and compress (in either or ) your , , , and projects, while receiving the total bundles' file size. bundlejs bundle js gzip brotli typescript javascript jsx npm aims to generate more accurate bundle size estimates by following the same approach that bundlers use: bundlejs Doing all bundling locally Outputting the tree shaken bundled code Getting the resulting bundle size The benefits of using are: bundlejs It's easier to debug errors You can verify the resulting bundled code The ability to configure your bundles The ability to tree shake bundles The ability to view a visual analysis of bundles You can bundle offline (so long as the module has been used before) Supports different types of modules from varying , e.g., CDNs ranging from deno modules to npm modules to random GitHub scripts, etc... Content Delivery Networks (CDNs) This blog post is meant to highlight some of the most important changes, as well as to give some insight into how works in the background, and to act as the docs for bundlejs. bundlejs 📒 : There will be a follow-up article to this one, going into the technical nitty gritty on how works, and how you can use what I've learned from this project to either create your own online bundler or an es build-wasm backed js repl. Note bundlejs 😅 : this blog post is rather long, so take a look at the website first, then skim through this blog post and make sure to check out the images and the code examples, those can help cut down on confusion and reduce the required reading time. TL;DR bundlejs.com Quick feature run down https://www.youtube.com/watch?v=5FTricK1peg This video runs through all the major features of (there is audio but I don't have a good mic 😅) bundlejs Bundling, Tree shaking, and Minification is the process of efficiently modules together into one file which we call a . Bundling concatenating bundle is the process of a bundler traversing the modules to be bundled and removing unused code. Tree shaking is the process of shrinking the amount of code necessary to have a functional program, e.g. removing blank space or reducing variable names, etc... Minification uses and its incredible ability to bundle, transform, transpile, minify, tree shake, and traverse files. Specifically, uses , which is able to access a subset of those features, with the key limitations being: bundlejs esbuild bundlejs esbuild-wasm Npm only runs on node, so no package.json or (a-la, a joke about using to run node on the browser) npm install StackBlitz WebContainers Browsers don't work the way nodejs does. They don't have an easy way to access the file system, so storing and accessing files isn't practical. The way esbuild would normally work when installed on node just causes issues on the web Due to the limitation of esbuild-wasm when running on a browser (no npm, and node nodejs), the only option is for modules to come from the web, but esbuild doesn't natively support importing modules, so a different solution is required. http(s)://... To solve each of these problems, esbuild's plugin system comes in clutch. I created a total of 4 plugins to solve these limitations, they are: plugin - Fetches and caches modules HTTP plugin - Redirects npm package imports (sometimes referred to as bare imports) to URLs for fetching CDN Content Delivery Network (CDN) plugin - Marks certain imports/exports as modules to exclude from bundling EXTERNALS plugin - Aliases certain imports/exports to modules of a different name. ALIAS are a great way to distribute code all over the world at fast speeds. In the context of , CDNs represent online repositories of code that can fetch from. Content Delivery Networks (CDNs) bundlejs bundlejs For example, is a fast global content delivery network for everything on npm. It's used to quickly and easily load any file from any package on npm using a URL like: , a similar thing would apply for , , etc... unpkg.com https://unpkg.com/package-name@version/file.js skypack.dev esm.sh In a later blog post, I will delve deeper into the technical details of how these plugins work, but for now, just keep in mind that these plugins assist to create javascript bundles. esbuild-wasm ℹ️ : This is the impact tree shaking and minifying a bundle has on bundle size: Info treeshaken vs. - non treeshaken Console In previous versions of , I encouraged devs to use the devtools console for viewing console logs, and for a while, I thought it was an experience, but I started realizing that it was inconvenient and not very mobile-friendly. bundlejs.com ok Initially, I thought creating a virtual console would be a large undertaking, so I delayed adding a custom console for quite some time. Well, in March of this year, inspired by 's , I finally did it 👏. @hyrious esbuild-repl Console Results The console functions by listing out details of the build pertinent to users, e.g., fetched packages, errors, etc...This includes bundle result info. Fetching Packages By default, the console will display the progress for fetching packages It's often the best way to diagnose errors and issues, as well as to find points of improvement. For some packages (ahem ), there are too many sub-packages. Having the virtual console handle that many logs will eat up too much memory, and/or slow down less powerful devices; so I limit the number of logs to 250 and when that limit is passed, will show this friendly message: @babel/core bundlejs 📒 : you can still access the full console log from the devtools console, even if the virtual console does any kind of truncating. Note You can change the maximum amount of logs allowed in the config via: { "esbuild": { "logLimit": 500 } } Console Errors & Warnings Errors look like this: Warnings look like this: Console Buttons The consoles were also given buttons to make them easier to navigate, they are these right here This is the button. As new console logs are introduced, the console automatically sticks to the bottom. Some users may find this behavior annoying, so this button offers a quick and easy opt-out by taking the user straight to the top of the console. scroll to top This is the button. Basically, a get to the bottom as quickly as possible button, it's meant for quickly checking out the final bundle result. scroll to bottom This is the , it expands/collapses all errors and warnings quickly, making it easier to navigate through a large set of errors. expand/collapse button This is the , it clears the console of contents leaving the console looking like this: clear console button Console Extras Sticks console scroll position to the bottom for new logs. If you scroll away from the bottom, this behavior no longer applies; if you scroll back to the bottom, the behavior will apply again. Sticky Console: ~50px I get so annoyed when things that can align don't align, so I built into the console to align by default with the result section on a large enough screen, e.g. laptops, tablets, desktops, etc... Pet-peeve alignment: bundlejs Exactly as it sounds, clickable console links highlight URLs that start with , they function just like how vscode and the devtools do and act as an easy way to access console URLs without having to copy and paste the URL manually. Clickable console links: http(s)://... It does have some limitations, namely, it sometimes has difficulty recognizing which characters are links and which are not, e.g., I couldn't find an example while making this blog post 🤣, when/if (hoping it's an if rather than a when) I find one, I'll update this post. The bundle results, e.g., the time it takes to create the bundle, the initial bundle size, the compressed bundle size, and more are logged to the console. Log bundle results: Input and Output Tabs With the addition of the console, I wanted to ensure that the editors weren't unwieldy, so I created a tab bar for the input, output, and config editor. The tab bar allows for quick access to all editors while ensuring that the is always available. console Configuration In , I added support for custom configurations (configs), it supports most of , as well as some added options to change the default CDN and the compression algorithm. v0.2 esbuild's build options The default config is: { "cdn": "https://unpkg.com", "compression": "gzip", "esbuild": { "target": [ "esnext"], "format": "esm", "bundle": true, "minify": true, "treeShaking": true, "platform": "browser" } } When you click the share button, it will also share the custom config you've setup, e.g., { "cdn": "https://unpkg.com", "compression": "lz4", "esbuild": { "target": [ "es2018" ], ... } } The config above would result in this share URL . bundlejs.com/?q=@okikio/animate&config={"compression":"lz4","esbuild":{"target":["es2018"]}} Notice how is missing from the share URL, that's because smartly decides on which config to send as a part of the share URL based on how different the new config is from the default config. cdn bundlejs 📒 : There are 3 available compression algorithms, , , and . Note brotli gzip lz4 CDN Hosts are a great way to distribute code all over the world at fast speeds. In the context of , CDNs represent online repositories of code that can fetch from. Content Delivery Networks (CDNs) bundlejs bundlejs For example, is a fast, global content delivery network for everything on npm. It's used to quickly and easily load any file from any package on npm using a URL like: , a similar thing would apply for , , etc... unpkg.com https://unpkg.com/package-name@version/file.js skypack.dev esm.sh By default, lets you enter code like this: bundlejs export * from "@okikio/animate"; But behind the scenes, auto fetches that specific package from a CDN namely, . bundlejs unpkg In older versions of the default CDN used to be , but because skypack doesn't have easy access to the of node packages, I switched to using unpkg as the default CDN. bundlejs, skypack package.json With later updates, received the ability to update the default on a global or local scale. bundlejs cdn Technical details and more info... You can choose CDNs by: ( ) Setting the CDN config to a different CDN host, e.g. Global CDN { "cdn": "https://cdn.esm.sh", // OR "cdn": "skypack" } ( ) Using the CDN host as an inline URL scheme, e.g. Local CDN export { animate } from "skypack:@okikio/animate"; // ^^^^^^^ https://cdn.skypack.dev/@okikio/animate There are a total of 8 supported inline CDN host url schemes: -> skypack:react https://cdn.skypack.dev/react -> unpkg:react https://unpkg.com/react or -> esm.sh:react esm:react https://cdn.esm.sh/react -> deno:preact https://deno.land/x/preact -> esm.run:react https://esm.run/react -> github:facebook/react/main/packages/react/index.js https://raw.githubusercontent.com/facebook/react/main/packages/react/index.js -> 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 After determining the CDN to use, the next step is to determine if the CDN host supports npm style modules, examples of which are , , , etc... unpkg skypack esm.sh The factors involved in determining that a CDN host supports npm style modules are that the CDN host supports: The CDN supports package versioning through the URL tag (e.g. ). @version react@18 The CDN can load node packages, file. package.json 📒 : Without the , you can't load , plus it becomes more difficult to determine the correct exported modules to bundle with. Note package.json subpath imports ⚠️ : If the chosen CDN doesn't support the file, and it isn't a npm style CDN host, then will switch to trying to guess package versions; this may lead to inaccurate bundles with the wrong versions of packages. Warning package.json bundlejs In a later blog post, I will delve deeper into the technical details of how the esbuild CDN plugin works to determine which CDN host to use, but for now, you just keep in mind that the CDN plugins assist in resolving CDN host URLs. esbuild-wasm Compression Algorithms offers the options of bundling using: bundlejs - results in the smallest bundle size, but it's the slowest brotli - results in the 2nd smallest bundle size, but it's faster than ( ) gzip brotli default - results in the largest bundle size, but it's the fastest bundle algorithm. lz4 📒 : Each compression algorithm has it's own story. Note The Brotli Problem is a compression algorithm that compresses data really well, however, it's very slow compared to other alternatives. Adding brotli was quite an undertaking with lots of ups and downs, but thanks to on Twitter, I was able to use to include a WASM version of brotli in . brotli Lewis Liu deno-brotli bundlejs Learn the story behind brotli support... No to the original creators of and (different packages, similar name), but the way both packages handle WASM forces devs to use webpack (which wasn't happening, I value my time tooooo much for that). After multiple attempts and 6 months of work later, I finally found . shade brotli-wasm wasm-brotli deno-brotli An example of the way WASM is used in both packages (brotli-wasm and wasm-brotli) is as follows: import WASM from "./bg.wasm"; // ... In all honesty, it's not fair for me to blame the creators of and , it's not their fault. The fault lies in the js ecosystem not yet finding an interoperable solution for working with WASM. That's one of the key reasons I'm very thankful for pointing out . brotli-wasm wasm-brotli Lewis Liu deno-brotli does 2 things right, they are: deno-brotli It compresses the huge WASM file required for into an compressed string, which can then be decompressed by allowing for easy storage of the WASM as a js file (the result is great build tools support as the WASM is just a string inside a JS file, plus it solves the ecosystem problem really well). deno-brotli lz4 lz4 For support, is using , which also runs via WASM, but the way compress itself is slightly different than . I'd highly encourage you to take a look at the source code for , it's really informative. lz4 bundlejs deno-lz4 deno-lz4 deno-brotli deno-lz4 By having the WASM as a js file, you can actually preload the WASM as a js module 🤯 You can read through this tweet thread to learn more: https://twitter.com/okikio_dev/status/1498898909879422977?s=20&t=iUL2EzC810kgGM6tn8nJeg Default to Gzip has used as the default for quite some time. used to use , but thanks to a discussion with who rightfully pointed out the , I started looking into alternatives to . bundlejs gzip bundlejs pako @matthewcp (De)compression Stream API pako https://twitter.com/matthewcp/status/1503704061853450242?s=20&t=CDGJmTts_m2A9H7cyZfmew Learn the story behind gzip support... Thanks to the conversation with , I actually did some further research into alternatives> I have 3 possible alternatives, they are (which uses WASM), (which uses js), and (which is built into browsers), yay fun 🎉😅. @matthewcp pako denoflate deno-compress CompressionStream I eventually chose to replace with as the default compression algorithm for gzip; it's a bit faster and smaller than . pako denoflate pako LZ4, Gotta Go Fast In order to use WASM in a portable way, would compress the WASM binary file into a base64 string using as the compression algorithm. I saw the opportunity to add another compression algorithm, so I used the ( ) implementation used to compress the brotli WASM binary string (see for more info.), it was by far the easiest compression algorithm to add to 🤣. deno-brotli lz4 lz4 deno-lz4 #the-brotli-problem bundlejs Compression Quality You can set the quality of the compression (from a scale of 1 to 11, with 1 being the least compressed and 11 being the most compressed), you can set the compression quality for any of the compression algorithms mentioned above by setting the compression config option to: { "compression": { "type": "brotli", "quality": 11 } } You can check out a demo here, . bundlejs.com/?config={"compression":{"type":"brotli","quality":11}} Aliases and Externals Aliases are a way to redirect certain packages to other packages, e.g. redirecting the to , because isn't supported on the web, etc... This wasn't a direct feature request, but I felt it would be a good addition. fs memfs fs Externals are a direct feature request , it took a while but a good solution is finally a part of bundlejs, you use it the way you'd use the esbuild externals config option. issue#13 More details... You use like this: aliases { "alias": { "@okikio/animate": "@babel/core" } } You can try it out below, . bundlejs.com/?config={"alias":{"@okikio/animate":"@babel/core"}} You use like this: externals { "esbuild": { "external": ["@okikio/animate"] } } 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":[...]}} No one else can understand my pain...I'm adding more feature to as I'm writing this blog post, so it's just getting longer and longer and longer, etc.... 😅 bundlejs Esbuild Config Options config options are exactly how they sound, however, with esbuild running on the browser, there are some limitations on what esbuild can do. Due to the lack of native filesystem access, some options don't work or are rendered obsolete. esbuild The supported esbuild build options are: Simple options Bundle Define External Format Inject Loader Minify Platform Sourcemap Splitting Target Advanced options Analyze Asset names Banner Charset Chunk names Color Drop Entry names Footer Global name Ignore annotations Incremental JSX JSX factory JSX fragment Keep names Legal comments Log level Log limit Mangle props Metafile Out extension Outbase Public path Pure Resolve extensions Source root Sourcefile Sources content Stdin Tree shaking Tsconfig raw Quite a bit to work with, I'd say. Editor Buttons + Extra Features... The editor buttons add extra functionality to the editor; they enable easy access to common editor tasks. The current list of editor buttons are: Editor panel toggle Toggles on or off the editor buttons, leaving more space for the code editor. It looks like this when the editor buttons are hidden: Clear editor button Clears the editor of all its contents. Format code button Cleans up any messy code it finds. It uses to format the input and output editor code but falls back to baked in formatter for the config editor. dprint monaco-editors Reset code button Resets the editor to its initial state. For the input editor, it resets it to this: // Click Build for the bundled, minified and compressed package size export * from "@okikio/animate"; For the output editor, it resets it to this: // Output For the config editor, it resets it to this: { "cdn": "https://unpkg.com", "compression": "gzip", "analysis": false, "esbuild": { "target": [ "esnext" ], "format": "esm", "bundle": true, "minify": true, "treeShaking": true, "platform": "browser" } } Copy code button Copies the editor’s code, it's exactly as it sounds (what were you expecting? 🤣). When you copy code from the editor using the copy button, this delightful little message appears: Wrap code button Toggles between and code. Wrapping is all about making the editor’s code wrap around the constraints of the editor’s bounding box, removing the need to scroll horizontally to view all the code. wrapped unwrapped This is how code looks: wrapped This is how code looks: unwrapped Bonus features : You can access monaco's built in command palette by pressing F1, e.g. Bonus : You can use many of the code shortcuts vscode has by just right clicking while in focus on the , e.g. Extra Bonus monaco-editor Drag Handles...Interactive Fun https://www.youtube.com/watch?v=AMt01tFstik&feature=youtu.be The new drag handles enable a more interactive experience with the editor; they are a little like the drag handles in vscode, but mobile-friendly. being mobile friendly isn't a huge focus point for the project, but it's nice to have if you ever find yourself in the need for while on a mobile or touch enabled device. bundlejs bundlejs JSX Support JSX is now officially supported in 🎉. bundlejs Ignore the red error lines, for some reason the doesn't want to work well with JSX 😅 monaco code editor To use JSX, you need to set the and the config options according to the JSX-based framework you are using. jsxFactory jsxFragment e.g. for , the following config would be used: Preact { "esbuild": { "jsxFactory": "h", "jsxFragment": "Fragment" } } Try out the preact demo Sharing Bundle Sessions To share bundle sessions* between multiple users (while avoiding the need for a server) we need a static and local way to store and share code between users. To solve this problem, I decided to encode the bundle session* information right into the URL, this was because I wanted the entire project to run offline, and I didn't want the high maintenance cost of a server and database. *sessions are the specific state of at a specific time, they are not the entire bundle session history, just the input code and the bundle configuration at the time the share button is clicked. bundlejs Technical details... A high-level summary of how this works is that users make a change in the input code editor, that change then gets saved and encoded into the URL. The URL can then be used to create replays of the bundle session. A URL is: sample session /?q=(import)@okikio/emitter,(import)@okikio/animate,(import)@okikio/animate,(import)@okikio/animate,(import)@okikio/animate,@okikio/animate,@okikio/animate,@okikio/animate,@okikio/animate&treeshake=[T],[{ animate }],[{ animate as B }],[ as TR],[{ type animate }],[],[{ animate as A }],[ as PR],[{ animate }]&text="export as PR18 from \"@okikio/animate\";\nexport { animate as animate2 } from \"@okikio/animate\";"&share=MYewdgziA2CmB00QHMAUAiAwiG6CUQA&config={"cdn":"skypack","compression":"brotli","esbuild":{"format":"cjs","minify":false,"treeShaking":false}}&bundle The resulting input code of this bundle session url is this: // Click Build for the Bundled, Minified & Compressed package size import T from "@okikio/emitter"; import { animate } from "@okikio/animate"; import { animate as B } from "@okikio/animate"; import as TR from "@okikio/animate"; import { type animate } from "@okikio/animate"; export from "@okikio/animate"; export { animate as A } from "@okikio/animate"; export as PR from "@okikio/animate"; export { animate } from "@okikio/animate"; console.log("Cool") export as PR18 from "@okikio/animate"; export { animate as animate2 } from "@okikio/animate"; with a config of: { "cdn": "skypack", "compression": "brotli", "esbuild": { "target": ["esnext"], "format": "cjs", "bundle": true, "minify": false, "treeShaking": false, "platform": "browser" } } The URL breakdown is: /? q=(import)@okikio/emitter,(import)@okikio/animate,(import)@okikio/animate,(import)@okikio/animate,(import)@okikio/animate,@okikio/animate,@okikio/animate,@okikio/animate,@okikio/animate& treeshake=[T],[{ animate }],[{ animate as B }],[* as TR],[{ type animate }],[*],[{ animate as A }],[* as PR],[{ animate }]& text="export * as PR18 from \"@okikio/animate\";\nexport { animate as animate2 } from \"@okikio/animate\";"& share=MYewdgziA2CmB00QHMAUAiAwiG6CUQA& config={"cdn":"skypack","compression":"brotli","esbuild":{"format":"cjs","minify":false,"treeShaking":false}}& bundle or represents the module, e.g. , , etc... q query react vue You can add in-front of a specific module to make it an import instead of an export (import) represents the export/imports to treeshake. treeshake The tree shake syntax allows for specifying multiple exports per package, through this syntax: "[{ x,y,z }],[*],[* as X],[{ type xyz }]" // to export { x, y, z } from "..."; export * from "..."; export * as X from "..."; export { type xyz } from "..."; The square brackets represent separate packages, and everything inside the square brackets, are the exported methods, types, etc... represents the input code as a string (it's used for short input code) text represents compressed string version of the input code (it's used for large input code) share represents the bundle configuration to use when building the bundle config tells to bundle the input code on start-up. This isn't on by default for security reasons. I want to discourage people from sending large complex bundles that crash browsers or that take a long time to load, especially before the input code is properly verified as non-malicious. So, if you want to bundle the code on startup, you have to manually add to the end of the URL yourself. bundle bundlejs &bundle The reason why I decided on this syntax is because it allows for a lot of flexibility and transparency concerning what is being bundled. I also wanted to make it easy to share bundle sessions between users. Bundle Analysis can analyze and visually represent bundles as easy to navigate and easy-to-understand charts. bundlejs Using a port of and by , I added the ability to visualize bundles, this feature comes from a feature request by on , the issue is still open you can make suggestions to improve this feature. esbuild-visualizer rollup-plugin-visualizer @bardadymchik @atomiks issue#22 The bundle analysis charts are displayed right under the editor, like so: The charts displayed comes in 3 distinct flavors: Treemap Chart Treemap charts are the most memorable form of bundle analysis chart; the inspiration behind this chart is . is the of bundle analyzers, and a great inspiration to the approach took to creating charts. webpack-bundle-analyzer webpack-bundle-analyzer progenitor bundlejs Treemap charts: Help you realize what's really inside your bundle Find out what modules make up the most of its size Find modules that got there by mistake Optimize it! Source: github.com/webpack-contrib/webpack-bundle-analyzer Source: github.com/webpack-contrib/webpack-bundle-analyzer Though the treemap chart is less powerful than the 's treemap chart, it is simpler, and faster to use ( uses esbuild and the bundle analysis is easily available online). bundlejs webpack-bundle-analyzer bundlejs Network Chart Network charts don't change a lot from the , however, they do offer a unique perspective on the impact of the relative sizes of modules in a bundle. treemap chart Sunburst Chart Similar to , sunburst charts don't reinvent the wheel. They accomplish similar things to the , though the difference comes in how they represent the relative size of modules in bundles. network charts treemap chart Sunburst charts use to represent bundle sizes, it aids in understanding just how much of the total bundle size certain modules take up. pie charts Technical details... 📒 : All analysis charts support the gzipped and brotli compressed sizes of bundles! When analyzing a bundle it will choose either or based on the compression type. Note gzip brotli e.g. A config of: { "compression": "gzip" } will use gzip compression for the charts, resulting in: Analytics When I initially built the project, I only used a simple page view counter. I wanted to view how popular the project was without violating user privacy, it worked but I felt it could be better. So, I decided to also use as a privacy-preserving, cookieless, open-source, Google Analytics alternative, to which the analytics are public for anyone to view. umami Extra detail... For a self-hosted version of is used, this is to ensure user data is kept private and secure. When trying to setup the self-hosted version of umami, I found that the article by , was a great help. bundlejs, umami Setting up Umami with Vercel and Supabase Jakob Bouchard The analytics are publicly available, check them out at, analytics.bundlejs.com/share/bPZELB4V/bundle Or click the page visit counter: 📒 : is still using a page view counter, the view counter is powered by (to the best of my knowledge, countapi is now deprecated, however, the servers for the project are still up and running. So, I'll keep using the project until I switch to using umami for page views as well as general analytics). Note bundlejs countapi https://dev.to/jakobbouchard/setting-up-umami-with-vercel-and-supabase-3a73 Discussions and Support To encourage discussion, give support, and gain feedback, I added a comment section to , I used for this. bundlejs giscus Initialy, when I created the project, I also created a for it as well. I didn't want to have the overhead of having to manage a Discord server, so I choose GitHub Discussions for chats about . bundlejs GitHub Discussion bundlejs The problem is that no one really uses , so I integrated it right into the website itself via . This was so new users can easily interact with others, get support from me, and leave me feedback. GitHub Discussions giscus Technical details... is an open-source comments system powered by ; it lets visitors leave comments and reactions on your website via GitHub! It was heavily inspired by . giscus GitHub Discussions utterances For I'm using a self-hosted version of , this was for security reasons mostly. When trying to set up for , the on the GitHub repo are very helpful. I highly suggest anyone thinking of using to read it, it gives insight into how works on the backend. bundlejs, giscus giscus bundlejs self-hosting docs giscus giscus You can check out the integrated comments under the link, . giscus bundlejs.com/#discus As of right now, the comments section is looking really bare and basic, why not leave your mark. Leave a comment with what you love and what you think needs improvement in , I'll go through them and try to integrate your ideas into . bundlejs bundlejs Security and Performance Security and performance are critical quality areas for . In order to bundle modules together, has to fetch multiple sets of modules from all over the internet, while ensuring that malicious actors don't get involved, and that isn't taken advantage of to crash other devices. bundlejs bundlejs esbuild-wasm Some ... large modules can take up to of memory to be bundled properly by . really really 4+ GB esbuild-wasm The security criteria I set for were: bundlejs Don't leak personal user info. Don't go through a central server, e.g., the ability to get node modules from various sources. Ensure people always know what packages they are bundling. Ensure people can't use to maliciously slow down browsers. bundlejs To ensure I met the security criteria set: I use strict Content Security Policies (CSP) for , ensuring no unintended 3rd party can get involved. bundlejs I self-host as many of the 3rd party scripts as I can. By enclosing the number of hands involved in , I reduce the chance that personal information is leaked. bundlejs.com I use sandboxing techniques, e.g., and to ensure the main thread runs at a smooth while avoiding access to the DOM. Web Workers Shared Workers 60fps and are scripts that run on a seperate thread. By using Workers, I am able to isolate potentially malicious code while ensuring that the main-thread isn't affected. Web Workers Shared Workers Most of the uses of Workers were . reduce the performance impact of multiple instances of the site/web app running on the same device. Shared Workers Shared Workers bundlejs To reduce the chance of being used to maliciously slow down browsers, I ensure the share URL is easy to read and understand, and by default disable auto-bundling for shared URLs. bundlejs The current browser landscape for support is spotty at best. Shared Worker The support table looks like this: Browser Shared Workers Module Workers Firefox Yes No Chrome Yes Yes Safari Yes* Yes * Support for Safari is currently experimental but should be coming in later versions are esmodules that run in Workers. Module Workers 📒 : I built a polyfill . It's a small, but simple polyfill that falls back to a regular if are not supported. Note Shared Worker @okikio/sharedworker Web Worker Shared Workers You can use it while waiting for the next version of Safari to support , or while supporting older versions of Safari. Shared Workers ⚠️ : The doesn't handle module workers, you will still need to somehow compile your modules to non-esm versions to support workers in Firefox. Warning Shared Worker polyfill You can view how handles module workers in the , you may also wish to view the to see how it handles module workers. bundlejs bundlejs source code astro-repl source code Most of the other security policies are passive in nature, e.g., only bundling on page load if the URL has in it. bundlejs ?bundle enforcing for all requests, including for iframes, etc... bundlejs https:// Only have properly vetted CDN hosts for by default. bundlejs etc... Tips and Tricks , follow me ( ) and ( ) on twitter; 🤣. Top tier tip @okikio_dev bundlejs @jsbundle shameless plug I do post announcements and updates on these accounts, as well as small tips and tricks that help in making the most use of . bundlejs When bundling packages that also export CSS and other external files, now checks the gzip/brotli size of these external files, however, it won't output the external files' code. This behavior may change in the future, but for now, that is the approach I am going with. Keep in mind that this isn't a bug, however, if it causes confusion, I am willing to change this behavior. bundlejs.com Tree shaking is available, but not all CDNs support access to each packages , so there might be slight package version conflicts. The only verified CDN with access to the package.json is . The other CDNs that are used either pre-bundle the code for us (this is hit or miss depending on the package) or they aren't full npm CDNs e.g. or . package.json https://unpkg.com https://deno.land https://raw.githubusercontent.com Check the full devtools console for error messages and warnings if you are having trouble debugging an issue in , or even better yet, enable verbose logging when trying to debug issues, e.g. bundlejs esbuilds { "esbuild": { "logLevel": "verbose" } } Check out a . demo You can use custom protocols to specify which CDN's specific imports/exports module you should use. If an error occurs, such that you can't bundle a package properly, I highly suggest switching CDNs via either custom protocols or by changing the config option. I recommend using custom protocols instead of the config option when trying to debug issues with a CDN: cdn cdn e.g. { "cdn": "unpkg" } or export * from "unpkg:typescript"; Try using custom protocols to solve this on . example issue bundlejs For some packages, a soft error occurs where the default export is excluded from the tree shaken bundle. The solution for this is to manually include the default export like so” export * from "skypack:solid-dismiss"; // and export { default } from "skypack:solid-dismiss"; If you have a tip and trick you would like to share, post a comment below, or send me a ! tweet Contribute The codebase is currently quite disorganized, so I'd suggest direct messaging me on or starting a to discuss ways to contribute. Twitter GitHub Discussion There is a lot of stuff happening on the project, and it can be very overwhelming. If you think you can still contribute, by all means, please do! I will eventually get to writing detailed docs on how to contribute, and how everything works in the backend; look forward to it. bundlejs You can use a pre-made Gitpod dev environment to quickly get started with the project or to contribute quick changes to the project. If you love the project, I'd welcome it if you'd spread the word, my goal is to make a viable alternative/replacement for and even local bundlers. But right now, the project is so small that most people who'd benefit from it don't know about it. I'd love to see people using it. bundlejs bundlephobia Last note, is now on , so if you'd like to contribute to it financially, it'd be appreciated. bundlejs OpenCollective Conclusion , a quick and easy way to tree shake, bundle, minify, and compress (in either or ) your , , , and projects, while receiving the total bundles' file size. bundlejs gzip brotli typescript javascript jsx npm aims to generate more accurate bundle size estimates by following the same approach that bundlers use: bundlejs Doing all bundling locally Outputting the tree shaken bundled code Getting the resulting bundle size The benefits of using are: bundlejs It's easier to debug errors You can verify the resulting bundled code The ability to configure your bundles The ability to tree shake bundles The ability to view a visual analysis of bundles You can bundle offline (so long as the module has been used before) Supports different types of modules from varying , e.g., CDNs ranging from deno modules to npm modules to random GitHub scripts, etc... Content Delivery Networks (CDNs) The next time you need to bundle a project or you need to know the bundle size of a project, give a try. bundlejs.com 📒 : There will be a follow up article to this one, going into the technical nitty gritty on how works and how you can use what I've learned from this project to either create your own online bundler or an esbuild-wasm backed js repl. Note bundlejs Photo by , you can find the image on . Okiki Ojo Dropbox Originally published on blog.okikio.dev Also published on and Hackernoon dev.to