Question

我有两个网络包，main.js和vendor.js。显然，main.js脚本在vendor.js内有很多依赖项，必须先加载供应商。

目前，在我的html doc的最后，我正在做：

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

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

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

这必须是webpack的常见用例吗？

Answer 1

您应该defer使用defer。使用<script src={assets.javascript.vendor} defer charSet='UTF-8' /> <script src={assets.javascript.main} defer charSet='UTF-8' />，它们将以异步方式下载，但按照它们在文档中出现的顺序执行。有关详细信息，请参阅async vs. defer。

async

如果同时指定defer和async，如果浏览器支持，则defer为sliderObj[i].on("change:value", this._handleChangeSpeedSlider.bind(this, i));，如果不是，则为#!/bin/bash for pid in $(grep grunt) ; do kill ${pid} && echo "killed ${pid}" done，如Can you use both the async and defer attributes on a HTML script tag? 中所述）。

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。

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

2 个答案: