简体   繁体   English

Webpack中的异步块是什么?

[英]What is an async chunk in webpack?

This is probably a dummy question but after reading split-chunks-plugin documentation and this article about code splitting , i still can't understand what an async chunk refers to. 这可能是一个虚拟的问题,但是在阅读了split-chunks-plugin文档以及这篇有关代码拆分的文章之后 ,我仍然不明白async块是指什么。

The split-chunks-plugin documentation states about the chunks property that : split-chunks-plugin文档说明了chunks属性:

[it] indicates which chunks will be selected for optimization. [it]指示将选择要优化的块。 If a string is provided, possible values are all, async , and initial. 如果提供了字符串,则可能的值为all, async和initial。 Providing all can be particularly powerful because it means that chunks can be shared even between async and non-async chunks . 提供全部功能特别强大,因为这意味着即使在异步非异步块之间也可以共享

What is the difference between an async chunk and a non-async chunk ? 异步块和非异步块有什么区别? Is it linked to dynamic imports ? 它与动态导入相关联吗?

For example : 例如 :

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

Reading Chunk entity from webpack source code, i found the following piece of code : 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;
}

What i'm seeing here is that an async Chunk is a chunk that is not present in the chunk groups initially ( if (!initialChunks.has(chunk)) ). 我在这里看到的是异步块是最初不在块组中存在的块( if (!initialChunks.has(chunk)) )。 This let me think that an async chunk is a chunk which is loaded afterwards, for example at runtime. 这让我认为异步块是例如在运行时之后加载的块。

So if i get it right, the previous example will produce an async chunk : 因此,如果我做对了,前面的示例将产生一个异步块:

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

That might also be the case for hot reloading. 热重装也可能是这种情况。 Hope someone can confirm that. 希望有人可以确认。

EDIT : 编辑:

As @dawncold mentionned in the comment there is this nice article which explains what is a chunk in the first place. 正如@dawncold在评论中提到的,有一篇不错的文章首先解释了什么是块。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM