Parcel 2: Differential Bundling

[devongovett]

Parcel 2 already supports compiling to multiple targets when your input is a JavaScript file, but in order to make this easy to use, we need support for inserting the outputs of these targets into an HTML bundle automatically. Today, differential script loading in browsers can be done like this:

<script type="module" src="module.js"></script>
<script nomodule src="nomodule.js"></script>

While this is useful, it is not sustainable as new features continue to be added to the ECMAScript standard. New proposals like this one may help with that, and we should work with browser vendors to make that happen.

That said, the syntax may get somewhat complicated to implement in your HTML file manually, and the number of targets may change over time as the browsers you support implement new features. Application authors shouldn't need to care about this syntax, or the exact list of targets they need to bundle for.

Ideally, users would specify their browser targets (similar to browserslist), and Parcel would automatically generate a number of bundles as needed to support those targets. Users should not need to specify the exact features they want to generate bundles for, as this will be inferred from their browserslist. Initially, that would be module and nomodule, but over time may increase as new syntax for differential script loading becomes available in browsers.

When processing an HTML file, Parcel will discover <script> tags as it does today. When it finds one, it will create a number of dependencies for the referenced file, each for a different environment. It will then replace the script tag with multiple script tags, or whatever syntax is needed for browsers to load the correct targets based on feature support.

Input:

<script src="myscript.js"></script>

Output:

<script type="module" src="/dist/myscript.module.js"></script>
<script nomodule src="/dist/myscript.nomodule.js"></script>

Parcel will also detect if you do this manually in your HTML file, e.g. by pointing to module and nomodule script tags yourself, and it will produce ES module or script output based on that target.

[rtsao]

As I mentioned in #1168 (comment), the use of this approach adds a constraint that all dependencies must be valid ES modules (i.e. no non-strict mode code).

It's still pretty common for npm dependencies to be unable to be parsed as ES modules. That said, I think this could be a purely build-time error without any false positives/negatives. So assuming this were some option/flag, Parcel could throw if any incompatible dependencies are used.

Or it may be possible to automatically transform code into equivalent code that's a valid ES module for certain cases, but I suspect this will be non-trivial for many cases.

[green-arrow]

@devongovett - Is this still targeted for Parcel 2? If so, does it already have a target release / someone working on it? If this is something that hasn't been started but just needs someone to work on it, I'd be happy to take a look with some guidance.

[devongovett]

@green-arrow I'm actually working on it right now! See here for the current branch. Very WIP at this point.

[green-arrow]

@devongovett oh nice! I’m wanting to go this direction with a current project instead of having to manually write a polyfill loader, etc, so please let me know if you need anyone to test in an app as I’d be more than happy to help.

[addyosmani]

Hey @devongovett. I'm happy to share Chrome is donating $5,000 to support Parcel's work on differential bundling 🎉 We think this workstream's goals of reducing the developer overhead of generating modern bundles is in line with our goals of improving the performance of the web.

Amazing work on the project, @devongovett and team. I've used Parcel on a few personal projects and hope this helps just a little :)

~ signed Addy, @stubbornella and @spanicker from the Chrome Web Framework & Tooling fund

[devongovett]

@addyosmani AMAZING, thank you so much! 😍

This is actually great timing as we're working on this right now. Just opened the first PR: #3545 😉

[addyosmani]

Our pleasure! Excited to give the first PR a spin! 😄 cc @developit @philipwalton fyi