これはおそらくダミーの質問ですが、split-chunks-pluginのドキュメントとコード分割に関するこの記事を読んだ後でも、async
チャンクが何を指しているのか理解できません。
スプリット・チャンク・プラグインのドキュメントに関する状態chunks
プロパティこと:
[it]は、最適化のために選択されるチャンクを示します。文字列が指定されている場合、可能な値はall、async、およびinitialです。それはチャンクがさえ間で共有することができることを意味するので、すべてを提供することは、特に強力であることができ、非同期および非非同期塊。
非同期チャンクと非非同期チャンクの違いは何ですか?動的インポートにリンクされていますか?
例えば :
if (myCondition) {
import('myLib').then(myLib => {
// Do something
});
}
読み込みチャンクからエンティティをWebPACKののソースコードは、私は次のコードが見つかりました:
getAllAsyncChunks() {
const queue = new Set();
const chunks = new Set();
const initialChunks = intersect(
Array.from(this.groupsIterable, g => new Set(g.chunks))
);
for (const chunkGroup of this.groupsIterable) {
for (const child of chunkGroup.childrenIterable) {
queue.add(child);
}
}
for (const chunkGroup of queue) {
for (const chunk of chunkGroup.chunks) {
if (!initialChunks.has(chunk)) {
chunks.add(chunk);
}
}
for (const child of chunkGroup.childrenIterable) {
queue.add(child);
}
}
return chunks;
}
私がここで見ているのは、非同期チャンクは最初はチャンクグループに存在しないチャンクであるということです(if (!initialChunks.has(chunk))
)。これにより、非同期チャンクは、後で、たとえば実行時にロードされるチャンクであると思います。
だから私がそれを正しく理解すれば、前の例は非同期チャンクを生成します:
if (myCondition) {
import('myLib').then(myLib => {
// Do something
});
}
これは、ホットリロードの場合にも当てはまります。誰かがそれを確認できることを願っています。
編集:
コメントで@dawncoldが言及したように、そもそもチャンクとは何かを説明するこの素晴らしい記事があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加