什么是webpack中的异步块？

Question

这可能是一个虚拟的问题,但在阅读了split-chunks-plugin文档和关于代码拆分的这篇文章后,我仍然无法理解async块的含义.

在分块,插件文件有关规定chunks特性是:

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

异步块和非异步块之间有什么区别？它与动态进口有关吗？

例如 :

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

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