javascript - Webpack中的异步块是什么？

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

split-chunks-plugin documentation声明有关chunks属性的信息:



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

例如 :

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

最佳答案

从Chunk源代码读取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首先解释了什么是块。