webpack中的异步块是什么？

Question

这可能是一个虚拟问题，但在阅读了split-chunks-plugin documentation和this article about code splitting之后，我仍然不明白async块是什么。 split-chunks-plugin documentation关于chunks属性的说明是：

“指示将选择哪些块进行优化。如果提供字符串，则可能的值为all、async和initial。提供all可能特别强大，因为这意味着即使在异步和非异步块之间也可以共享块。”

异步块和非异步块有什么区别？它与dynamic imports有关吗？

例如：

if (myCondition) {
    import('myLib').then(myLib => {
        // Do something
    });
}

- Samuel Maisonneuve

Answer 1

在 webpack 的源代码中阅读 Chunk 实体时，我发现了以下代码:

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在评论中提到的那样，有这篇好文章，解释了首先什么是一个块。

- Samuel Maisonneuve

---

有一部分是关于“理解代码块”的，我认为对我很有用，https://itnext.io/react-router-and-webpack-v4-code-splitting-using-splitchunksplugin-f0a48f110312 - dawncold

谢谢，好文！ - Samuel Maisonneuve