Why do module scripts that contain esm load slower than non module scripts?

[David Alsh]

Hey all, 

I am working on this very large application and noticed a significant performance regression when migrating from webpack to any bundler that uses es modules rather than script tags for dynamic loading of scripts.

We observed was that no-module scripts (type="application/javascript") evaluated lazily, compiling code as the browser came across it where as code that contained es modules (type="module") spend a considerable amount of time stalled during initialization on "compiling modules", where no evaluation occurs, delaying TTI.

In my production use case, that stall can last anywhere from 500ms to 1.5s on slower devices - which delays the TTI.

Below you can see our production application compiled using Webpack without es modules (type=application/text)

And here again, the same application compiled with Parcel using no es modules

However when Parcel is configured to emit bundles that use module syntax - the browser spends a bunch of time compiling before it begins working:

 

I then created a toy application to attempt to reproduce this on a smaller scale and sure enough, the same results.

This time Webpack 5 default, Webpack 5 ESM (experimental), and Parcel ESM.

Webpack 5 non ESM:

Webpack 5 ESM

Parcel ESM

What is the browser doing in this compiling step?

Is this expected?

How can bundlers emit code optimised for TTI evaluation?

[PhistucK]

Sounds like a bug (either a browser bug/missing some optimisation, or missing some reporting in the developer tools that would explain the gap) to me. crbug.com is the probably best way to get some eyes on this.

☆PhistucK

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

---
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discu...@chromium.org.