Bundling a full website as a single file and making it shareable opens up new use cases for the web. Imagine a world where one can:

• Create their own content and distribute it in all sorts of ways without being restricted to the network
• Share a web app or piece of web content with their friends via Bluetooth or Wi-Fi Direct
• Carry their site on their own USB or even host it on their own local network

The Web Bundles API is an exciting proposal that could make this all possible and in turn, simplify the streamline processes for the developer!

Web Bundling is the process of fetching, resolving, packing, and reducing a tree of dependencies into compressed static files that one can readily host on the web.

What Are Web Bundlers?

In the simplest terms, a Web Bundle is a tool that bundles all HTTP resources up in a singular, web optimized output folder. In doing so, the lives of developers not only become simpler — but easier to streamline and process.

The primary job of a bundler is to transpile the code down into something the browser can understand and then encapsulate those HTTP properties. The Web Bundler allows the developer to output all these properties into a singular folder that can then be included on a web page to load the entire application at once.

Why Web Bundlers?

Web Bundlers provide a number of assets for developers looking to utilize succinct packaging. The primary sectors of improvement associated with bundling are:

Improvement Of Developer Experience

• Dev server
• Hot module replacement
• Debugging support

Optimization Of Asset Production To Improve Performance And UX

• Minification
• Compressed and permanent code
• Code splitting
• Tree shaking

Web Bundling Options

There are a number of bundling software options available for developers looking to implement the method. The most important factors to measure when considering a specific alternative is two-fold: speed and package size. A faster build speed and a smaller package size would be the ideal solution.

Webpack

Webpack is currently the most popular alternative available to developers. It addresses the lack of tooling for complex single page applications. Before Webpack, developers had to manage dependencies manually.

Webpack is:

• Highly customizable
• A mature ecosystem
• A provider of responsive documentation and support
• Capable of utilizing module federation

Parcel

Parcel automatically tracks all files, configurations, plugins, and dev dependencies that are involved in the build, and granularly invalidates the cache when something changes. It integrates with low-level operating system APIs to determine what files have changed in milliseconds, no matter the project size.

Parcel is:

• Faster than Webpack
• Without a configuration requirement
• A provider of a built in hot module replacement

Rollup

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.

Rollup is:

• A simpler configuration than Webpack
• A provider of automatic tree shaking
• A smaller file size than Webpack
• A user of scope hoisting

Esbuild

Esbuild is a JavaScript bundler created by Evan Wallace. The code itself is written in Go with speed in mind, and it’s clear that the developer endeavored to avoid unnecessary allocations as much as possible.

Esbuild is:

• The fastest bundler currently on the market

Vite

Vite.js is a rapid development tool for modern web projects. It focuses on speed and performance by improving the development experience. Vite uses native browser ES imports to enable support for modern browsers without a build process.

Vite is:

• Capable of hot module replacement
• A provider of one of the fastest bundling times
• An automated code splitter
• A provider of a multi-page support module right off the bat
• Compatible with most popular framework templates

Live Demonstrations

Wai Fai Lau has crafted an intuitive demonstration to help guide you through these different Web Bundling alternatives in practicum:

Be sure to follow Wai Fai’s entire Lightning Talk to view this impressive demonstration in real time.

Closing Thoughts

All programs should always be designed with performance and the user experience in mind. The properties explored above are the primary stepping stones to exploring the basic components needed to test how Web Bundling can improve your personal data application. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about Web Bundling in web development and to experience Wai Fai Lau’s full Lightning Talk session, watch here.