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.
In Wai Fai Lau’s Lightning Talk session, we will breaking down the following topics:
- What Are Web Bundlers?
- Why Web Bundlers?
- Web Bundling Options
- Live Demonstrations
- Closing Thoughts
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
- 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 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.
- Highly customizable
- A mature ecosystem
- A provider of responsive documentation and support
- Capable of utilizing module federation
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.
- Faster than Webpack
- Without a configuration requirement
- A provider of a built in hot module replacement
- A simpler configuration than Webpack
- A provider of automatic tree shaking
- A smaller file size than Webpack
- A user of scope hoisting
- The fastest bundler currently on the market
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.
- 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
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.
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!
To learn more about Web Bundling in web development and to experience Wai Fai Lau’s full Lightning Talk session, watch here.