如何异步加载 webpack 包，但按顺序执行？答案

【问题标题】：How to load webpack bundles async, but execute in order?如何异步加载 webpack 包，但按顺序执行？
【发布时间】：2017-07-30 06:57:06
【问题描述】：

我有两个 webpack 包，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 包是异步加载的。但是如果我将两个包都设置为异步，页面加载将根据下载/执行的顺序随机失败。

基本上每个 pagespeed 工具都会抱怨 vendor.js 被“渲染阻塞”，即使它位于我的 html 文档的最后。我不知道要认真对待这个问题，但有没有办法将两个包设置为异步加载，但确保执行以正确的顺序发生，而无需执行诸如从其他 JavaScript 文件编写脚本标签等操作？

这一定是 webpack 的常见用例？

【问题讨论】：

标签： javascript html node.js asynchronous webpack

【解决方案1】：

您应该对它们都使用defer。使用defer，它们将被异步下载，但按照它们在文档中出现的顺序执行。如需更多信息，请参阅async vs. defer。

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

如果您同时指定async 和defer，如果浏览器支持，它们将是async，如果不支持，则回退到defer（如Can you use both the async and defer attributes on a HTML script tag? 所述）。

【讨论】：

【解决方案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 中使用。

【讨论】：