Что такое асинхронный блок в веб-пакете? - PullRequest
Новая
       6

Что такое асинхронный блок в веб-пакете?

0 голосов
/ 07 июня 2018

Это, вероятно, глупый вопрос, но после прочтения документации по split-chunks-plugin и этой статьи о разбиении кода , я до сих пор не могу понять, что относится к чану asyncto.

В документации split-chunks-plugin указано свойство chunks, которое:

[it] указывает, какие чанки будут выбраны для оптимизации,Если указана строка, все возможные значения: async и начальные.Обеспечение всего может быть особенно мощным, потому что это означает, что чанки могут совместно использоваться даже между асинхронными и неасинхронными чанками .

В чем разница междуасинхронный блок и не асинхронный блок?Связано ли оно с динамическим импортом ?

Например: 

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

1 Ответ

0 голосов
/ 07 июня 2018

Чтение 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;
}

Я вижу здесь, что асинхронныйЧанк - это чанк, который изначально отсутствует в группах чанков (if (!initialChunks.has(chunk))).Это позволяет мне думать, что асинхронный чанк - это чанк, который загружается впоследствии, например, во время выполнения.

Так что, если я правильно понял, предыдущий пример выдаст асинхронный чанк: 

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

Это может также иметь место для горячей перезагрузки.Надеюсь, что кто-то может подтвердить это.

РЕДАКТИРОВАТЬ:

Как упомянуто в комментарии @dawncold, есть хорошая статья , которая объясняет, что такое чанк в первую очередь.

...