search

GoogleChromeLabs / samples-module-loading-comparison

Some tests for comparing performance between bundling and unbundling JS
Apache License 2.0
61 stars 12 forks source link

Unbundled, flat imports #5

Closed dotproto closed 6 years ago

dotproto commented 7 years ago

During Sam's talk at Chrome Developer Summit he mentioned that the performance of loading Moment.js unbundled was notably worse than bundled. At the moment I'm not able to dig into the tests (still at CDS), but I suspect this is directly related to the lib's request waterfall.

What if the parent page contained a script tag for each module in the lib's dependency tree? This may help sidestep the need to walk every file in the lib's dependency tree in order to discover (and start downloading) each dependency individually. I suspect this will speed up the discovery and download process, especially in a H2 environment.

sgomes commented 6 years ago

That's essentially what the --preload option does, only instead of actually running each script, as a <script> tag would, it merely queues it up for a high-priority download with a flat list of <link rel="preload"> tags.

This results in an early fetch of the scripts, and there is indeed a performance boost. However, there are still other factors leading to an overall worse performance vs. bundling, such as minification and gzipping working best with large corpuses of text, and thus being significantly more efficient in the bundled version.

You can take a look at my article for all the details, specifically the "HTTP/2 with preload" section.

dotproto commented 6 years ago

I totally missed the --preload option. Thanks for the clarification. Sounds like this suggestion was already implemented, so I'm going to close this out.