How to load webpack bundles async, but execute in order?

Question

I have two webpack bundles, main.js and vendor.js. Obviously, the main.js script has many dependencies inside vendor.js, and vendor must be loaded first.

Currently, at the end of my html doc, I am just doing:

<script src={assets.javascript.vendor} charSet='UTF-8' />
<script src={assets.javascript.main} async defer charSet='UTF-8' />

This way, at least the main.js bundle is loaded async. But if I set both bundles to async, pageload will randomly fail depending on the order of download/execution.

Basically every pagespeed tool complains about vendor.js being "render blocking", even though it's at the very end of my html doc. I don't know how seriously to take this, but is there a way to set both bundles to load async, but ensure execution happens in the right order, without doing stuff like writing script tags from other JavaScript files etc?

This must be a common use case with webpack?

Answer 1

You should use defer for both of them. With defer they will be downloaded asynchronously but executed in the order they appear in the document. For more information see async vs. defer.

<script src={assets.javascript.vendor} defer charSet='UTF-8' />
<script src={assets.javascript.main} defer charSet='UTF-8' />

If you specify both async and defer they will be async if the browser supports it and fallback to defer if not (as mentioned in Can you use both the async and defer attributes on a HTML script tag? ).