[英]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.