Javascript 如何异步加载webpack捆绑包，但按顺序执行？

我有两个Web包包，

main.js

和

vendor.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。但是如果我将两个bundle都设置为async，pageload将根据下载/执行的顺序随机失败

基本上，每个pagespeed工具都抱怨

vendor.js

是“渲染阻塞”，即使它位于我的html文档的末尾。我不知道如何认真对待这一点，但有没有一种方法可以将这两个包都设置为异步加载，但确保以正确的顺序执行，而不必编写来自其他JavaScript文件的脚本标记等

---

这必须是webpack的一个常见用例？

您应该对这两个用例都使用

defer

。使用

defer

时，它们将异步下载，但会按照它们在文档中出现的顺序执行。有关更多信息，请参阅

---

如果您同时指定了

async

和

defer

，如果浏览器支持，它们将是

async

，如果不支持，则返回到

defer

（如中所述）。

如果您需要在执行脚本之前加载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>

函数加载脚本（脚本路径）{
var se=document.createElement（“脚本”）；
se.src=scriptPath；
se.async=false；
document.getElementsByTagName（“head”）[0].appendChild（se）；
}
loadScript（{assets.javascript.vendor}）；
loadScript（{assets.javascript.main}）；

它依赖于这样一个事实，即动态创建的元素不会阻止渲染，并且将它们设置为async:false意味着它们将按顺序加载。我不确定浏览器的兼容性是什么，但它在Chrome中工作

<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>