webpack 中的异步块是什么？

Question

这可能是一个伪问题，但在阅读 split-chunks-plugin documentation and this article about code splitting 之后，我仍然无法理解 async 块指的是什么。

split-chunks-plugin documentation 关于 chunks 属性的陈述：

[it] indicates which chunks will be selected for optimization. If a string is provided, possible values are all, async, and initial. Providing all can be particularly powerful because it means that chunks can be shared even between async and non-async chunks.

异步块和非异步块有什么区别？它链接到 dynamic imports 吗？

例如：

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

Answer 1

阅读Chunk entity from 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 在评论中提到的那样，nice article 首先解释了什么是块。

webpack 中的异步块是什么？

What is an async chunk in webpack?

javascript

webpack

code-splitting