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

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

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

// 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, поскольку они импортируются динамически. Есть идеи, пожалуйста?


webpack es6-modules webpack-4 webpack-splitchunks splitchunksplugin
person Danny Drinkwater    schedule 08.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

person Danny Drinkwater    schedule 08.01.2019