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

我有两个webpack包，main.js和vendor.js。显然，main.js脚本在vendor.js内有很多依赖关系，并且必须首先加载供应商。如何加载webpack包异步，但按顺序执行？

目前，在我的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文档的最后。我不知道如何认真采取这一点，但有没有办法设置这两个bundle加载异步，但确保执行正确的顺序发生，没有做像从其他JavaScript文件等脚本标签的东西？

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

来源

2017-03-09 Isaac Hinman

你应该使用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? 提到）。

来源

2017-03-09 13:55:03

如果您需要的脚本执行前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>

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

来源

2017-08-17 23:27:30

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

回答

相关问题