webpack 中的异步块是啥？

Posted 2023-02-19

【中文标题】webpack 中的异步块是啥？

【英文标题】：What is an async chunk in webpack?webpack 中的异步块是什么？

【发布时间】：2018-11-16 17:43:48

【问题描述】：

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

split-chunks-plugin documentation 声明了 chunks 属性：

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

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

例如：

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

【参考方案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 在评论中提到的那样，nice article 首先解释了什么是块。

【讨论】：

《Understanding chunks》有一部分，觉得对我有用，itnext.io/…

谢谢，好文章！