webpackの非同期チャンクとは何ですか?

サミュエルメゾンヌーブ

これはおそらくダミーの質問ですが、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]

編集
0

コメントを追加

0

関連記事

分類Dev

Pythonの非同期とは何ですか?

分類Dev

gulpタスクの非同期実行のヒントとは何ですか?

分類Dev

Oozie>非同期アクションと同期アクションの違いは何ですか

分類Dev

NodeJSのマルチスレッドと非同期の違いは何ですか

分類Dev

Kotlinコルーチンの起動/参加と非同期/待機の違いは何ですか

分類Dev

webpack [ハッシュ]と[チャンクハッシュ]の目的は何ですか?

分類Dev

Androidの同期および非同期とは何ですか?

分類Dev

非同期プログラミングとマルチスレッドの違いは何ですか?

分類Dev

Redux非同期アクション:最初のディスパッチをtryブロックに入れることで何か違いはありますか?

分類Dev

非同期タスクとタスクの違いは何ですか

分類Dev

非同期メインを持つことのポイントは何ですか?

分類Dev

私のwebpackローダーが非同期であることに何か利点はありますか?

分類Dev

この非同期JavaScriptと同等のFirebaseは何ですか

分類Dev

Redux非同期アクションテストの目的は何ですか?

分類Dev

AMQP中のチャンネルとリンクの違いは何ですか?

分類Dev

グーグルクラウドスピーチAPI:同期認識と非同期認識の違いは何ですか?

分類Dev

OpenTSDBのチャンクリクエストとは何ですか?

分類Dev

コンストラクターで非同期メソッドの例外をキャプチャする方法は?

分類Dev

結果を待つ非同期と同期の違いは何ですか?

分類Dev

非同期タスクAndroidでキャッチされた例外を標準の例外と比較するにはどうすればよいですか?

分類Dev

非同期実行で関数チェーンの実行を停止するためのベストプラクティスは何ですか?

分類Dev

JavaScriptの非同期アプローチの利点は何ですか?

分類Dev

タスクは非同期ですか、それとも非同期待ちなしの同期ですか?

分類Dev

BroadcomのstrataXGSアーキテクチャとは何ですか?

分類Dev

イベント駆動型と非同期の違いは何ですか?エポールとAIOの間?

分類Dev

AWS API Gateway WebSocketチャットの例は完全に非同期ですか?

分類Dev

Python非同期コードでPromise.raceと同等のものは何ですか?

分類Dev

チャンクの代わりは何ですか。NEWLINEitext7

分類Dev

ReactルーターWebpack非同期チャンクの読み込み

Related 関連記事

  1. 1

    Pythonの非同期とは何ですか?

  2. 2

    gulpタスクの非同期実行のヒントとは何ですか?

  3. 3

    Oozie>非同期アクションと同期アクションの違いは何ですか

  4. 4

    NodeJSのマルチスレッドと非同期の違いは何ですか

  5. 5

    Kotlinコルーチンの起動/参加と非同期/待機の違いは何ですか

  6. 6

    webpack [ハッシュ]と[チャンクハッシュ]の目的は何ですか?

  7. 7

    Androidの同期および非同期とは何ですか?

  8. 8

    非同期プログラミングとマルチスレッドの違いは何ですか?

  9. 9

    Redux非同期アクション:最初のディスパッチをtryブロックに入れることで何か違いはありますか?

  10. 10

    非同期タスクとタスクの違いは何ですか

  11. 11

    非同期メインを持つことのポイントは何ですか?

  12. 12

    私のwebpackローダーが非同期であることに何か利点はありますか?

  13. 13

    この非同期JavaScriptと同等のFirebaseは何ですか

  14. 14

    Redux非同期アクションテストの目的は何ですか?

  15. 15

    AMQP中のチャンネルとリンクの違いは何ですか?

  16. 16

    グーグルクラウドスピーチAPI:同期認識と非同期認識の違いは何ですか?

  17. 17

    OpenTSDBのチャンクリクエストとは何ですか?

  18. 18

    コンストラクターで非同期メソッドの例外をキャプチャする方法は?

  19. 19

    結果を待つ非同期と同期の違いは何ですか?

  20. 20

    非同期タスクAndroidでキャッチされた例外を標準の例外と比較するにはどうすればよいですか?

  21. 21

    非同期実行で関数チェーンの実行を停止するためのベストプラクティスは何ですか?

  22. 22

    JavaScriptの非同期アプローチの利点は何ですか?

  23. 23

    タスクは非同期ですか、それとも非同期待ちなしの同期ですか?

  24. 24

    BroadcomのstrataXGSアーキテクチャとは何ですか?

  25. 25

    イベント駆動型と非同期の違いは何ですか?エポールとAIOの間?

  26. 26

    AWS API Gateway WebSocketチャットの例は完全に非同期ですか?

  27. 27

    Python非同期コードでPromise.raceと同等のものは何ですか?

  28. 28

    チャンクの代わりは何ですか。NEWLINEitext7

  29. 29

    ReactルーターWebpack非同期チャンクの読み込み

ホットタグ

アーカイブ