什么是webpack中的异步块?

时间:2018-06-06 22:33:34

标签: javascript webpack code-splitting

这可能是一个虚拟问题,但在阅读split-chunks-plugin documentationthis article about code splitting后,我仍然无法理解async块所指的内容。

关于chunks属性的split-chunks-plugin documentation州:

  

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

异步块和非异步块有什么区别?它是否与dynamic imports相关联?

例如:

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

1 个答案:

答案 0 :(得分:0)

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;
}

我在这里看到的是,async Chunk是最初在块组中不存在的块(if (!initialChunks.has(chunk)))。这让我认为异步块是一个后来加载的块,例如在运行时。

所以,如果我做对了,前面的例子将产生一个异步块:

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

这也可能是热重装的情况。希望有人能证实这一点。

编辑:

正如@dawncold在评论中提到的那样,nice article首先解释了什么是块。