如何加载webpack bundle async，但按顺序执行？

Question

我有两个webpack包， main.js和vendor.js 。 显然， main.js脚本在main.js有很多依赖vendor.js ，必须先加载vendor。

目前，在我的HTML文档的最后，我正在做：

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

这样，至少main.js包被加载为异步。 但是如果我将两个bundle都设置为异步，则pageload会随机失败，具体取决于下载/执行的顺序。

基本上每个pagespeed工具都抱怨vendor.js被“渲染阻塞”，即使它位于我的html doc的最后。 我不知道如何认真对待这个问题，但是有没有办法设置两个bundle来加载异步，但确保执行顺序正确，而不需要编写其他JavaScript文件等脚本标记等内容？

这必须是webpack的常见用例？

Answer 1

您应该对它们使用defer 。 defer它们将以异步方式下载，但按照它们在文档中出现的顺序执行。 有关更多信息，请参阅async与defer 。

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

如果同时指定async和defer那么如果浏览器支持async和defer它们将是async如果不支持则返回defer （如同在HTML脚本标记中同时使用async和defer属性中所述 ）。

Answer 2

如果在执行脚本之前需要触发DOMContentLoaded，但是按顺序执行脚本则可以尝试这种方法：

<script>
    function loadScript(scriptPath) {
       var se = document.createElement("script");
       se.src = scriptPath;
       se.async = false;
       document.getElementsByTagName("head")[0].appendChild(se);
    }

    loadScript({assets.javascript.vendor});
    loadScript({assets.javascript.main});
</script>

它依赖于以下事实：动态创建的元素不会阻止渲染并将它们设置为异步：false表示它们将按顺序加载。 我不确定浏览器兼容性是什么，但它适用于Chrome。