Webpackバンドルを非同期にロードする方法ですが、順番に実行しますか？

Question

私は2つのウェブパックバンドルmain.jsとvendor.jsを持っています。明らかに、main.jsスクリプトはvendor.jsの中に多くの依存関係があり、最初にベンダーをロードする必要があります。

現在、私のHTMLドキュメントの最後に、私はやっています：

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

この方法は、少なくともmain.jsバンドルは非同期にロードされます。しかし、両方のバンドルを非同期に設定すると、pageloadはダウンロード/実行の順序によってランダムに失敗します。

基本的にすべてのページスピードツールは、私のhtmlドキュメントの最後にありますが、vendor.jsが「レンダリングブロック」になるという苦情を言います。私は真剣にこれを取るか分からないが、両方のバンドルを非同期にロードするように設定する方法があるが、他のJavaScriptファイルなどからスクリプトタグを書くなどのことをせずに正しい順序で実行されるようにする。

これはwebpackの一般的な使用例である必要がありますか？

Answer 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こととされていない場合（Can you use both the async and defer attributes on a HTML script tag? で述べたように）deferにフォールバックします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> 

それらをasyncに設定します。falseは、それらが順番にロードされることを意味します。ブラウザの互換性についてはわかりませんが、Chromeで動作します。