Webpack 4 SplitChunksPlugin - Общие зависимости в динамическом импорте

Question

Я использую динамический импорт с Webpack, согласно документации: https://webpack.js.org/guides/code-splitting/

Очень простой пример (не фактический код):

// main.js

import('./moduleA).then((moduleA) => {
  moduleA.init();
});
import('./moduleB).then((moduleB) => {
  moduleB.init();
});

// moduleA.js

import utility from './utility';
export function init() {...}

// moduleB.js

import utility from './utility';
export function init() {...}

Проблема заключается в том, что служебный модуль включен в чанки moduleA и moduleB, поэтому он дублируется. Я не могу найти способ заставить Webpack разделить эти типы зависимостей на отдельный общий блок, как это происходит со стандартным импортом. SplitChunksPlugin, похоже, не связывает какие-либо общие зависимости между moduleA и moduleB, потому что они импортируются динамически. Есть идеи, пожалуйста?

Answer 1

Итак, я пропустил несколько строк в документации - или просто неправильно понял. Webpack достаточно умен, чтобы знать, нужно ли разделять эти общие зависимости на отдельные части. Если общая зависимость превышает определенный размер файла, то он будет разбит на части, если файл достаточно мал, то Webpack считает его более производительным для объединения его в каждый модуль. Есть и другие условия, на которых это основано, поэтому посмотрите на документы, если вы окажетесь в этой позиции.