Introduction

A web site is composed of multiple resources, such as HTML, CSS, JavaScript and images. When a web application is loaded, the web browser first fetches the resources referenced by the page, and ultimately renders the web page.

The traditional way of building and deploying web sites is to use separate files for code organization purposes, and allow the browser to fetch them separately.

This model is well-supported by browsers and web specifications, but does not perform well in real-world applications, which frequently organize their code into hundreds or even thousands of files (even small websites quickly accumulate dozens of files).

In an attempt to address these performance issues without losing the ability to organize their code reasonably, developers have historically built tools that group together source files together in various ad-hoc ways:

• CSS concatenation.
• Image spriting.
• Bundling multiple JavaScript files together. Developers have used script concatenators for decades. More recently, developers have begun to use semantics-preserving module bundlers that combine many standard JavaScript modules into a single script or module.
• In recent years, developers have begun to bundle resources such as images and styles together with their JavaScript. In the case of CSS, this is accomplished by imperatively inserting styles into the DOM. In the case of images, it is accomplished by Base64-encoding the image, and then decoding the images at runtime using JavaScript and imperatively inserting them into the DOM.

Developers have also found ways to bundle newer file types (such as WebAssembly) with their JavaScript by base64 encoding them and including them in the combined JavaScript files that are created by build tools.

Modern tools that automate these ad-hoc strategies are known as "bundlers". Some popular bundlers include webpack, rollup, Parcel and esbuild.

Each bundler ecosystem is effectively a walled garden. Their bundling strategies are implementation details that are non-standard and not interoperable. In other words, there is no way for an application bundle that was created using webpack to access an image inside of an application bundle that was created using Parcel.

This proposal aims to create a first-class bundling API for the web that would satisfy the use-cases that motivated today's bundler ecosystem, while allowing resources served as part of a bundle to behave like individual resources once they are used in a page.

Read the complete Explainer

Relationship to Web Bundles

I've been working closely with Jeffrey Yasskin, Yoav Weiss and others who are involved with the WICG/webpackage repository. The idea is that the two repositories coexist with different focuses/scopes, but towards a unified solution where there is overlap. We plan keep working together (both in WICG and in the IETF WPACK WG) to iron out any open questions.

Feedback

I welcome feedback in this thread, but encourage you to file bugs against the Explainer.