Webpack: в чем разница между «всеми» и «начальными» параметрами в optim.splitChunks.chunks

Question

Я ищу четкое объяснение разницы между этими двумя вариантами в веб-пакете. Я прочитал описание здесь , но разница не ясна. Цитирую описание:

Задание для параметра optim.splitChunks.chunks значения «все» начальные чанки будут затронуты (даже те, которые не импортированы динамически). Таким образом, чанки могут быть разделены между точками входа и загрузкой по требованию.

Answer 1

Попытка простейшего объяснения:

//app.js
import "my-statis-module";

if(some_condition_is_true){
  import ("my-dynamic-module")
}
console.log("My app is running")

Это файл, который будет скомпилирован и упакован. Теперь посмотрим, как различные типы оптимизации будут относиться к этому.

asyn: (по умолчанию)

Будет создано два файла.
1. bundle.js (включает app.js + my-statis-module)
2. chunk.js (включает только my-dynamic-module)

начальный:

Будет создано три файла
1. app.js (включает только app.js)
2. bundle.js (включает только my-static-module)
3. chunk.js (включает только my-dynamic-module)

все:

Будет создано два файла
1. app.js (включает только app.js)
2. bundle.js (включает my-static-module + my-dynamic-module)

" all " будет иметь наименьший общий размер.

Answer 2

all означает, что для оптимизации будут выбраны как динамически импортируемые модули, так и статически импортированные модули. initial означает, что для оптимизации будут выбраны только статически импортированные модули.

Цитирование из Документация Webpack :

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