这可能是一个虚拟问题,但在阅读split-chunks-plugin documentation和this article about code splitting后,我仍然无法理解async
块所指的内容。
关于chunks
属性的split-chunks-plugin documentation州:
[it]表示将选择哪些块进行优化。如果提供了字符串,则可能的值为 async 和initial。提供all可以特别强大,因为这意味着即使在异步和非异步块之间也可以共享块。
异步块和非异步块有什么区别?它是否与dynamic imports相关联?
例如:
if (myCondition) {
import('myLib').then(myLib => {
// Do something
});
}
答案 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首先解释了什么是块。