(Webpack) Как разделять зависимости динамического модуля

Я просто понял, что если вы загружаете модули динамически с помощью require.ensure(), webpack не будет анализировать и блокировать зависимости вместе. Это имеет смысл в некотором роде, что можно утверждать, что веб-пакет не может знать, когда такие модули будут переданы, но можем ли мы заставить webpack выполнять работу в любом случае?

Пример:

app.js

require.ensure([ 'module1.js' ], ( require ) => {
    // at some point
    require( 'module1.js' );
}, 'Module1');

require.ensure([ 'module2.js' ], ( require ) => {
    // at some point
    require( 'module2.js' );
}, 'Module2');

module1.js

let io = require( 'socket.io-client' );

module2.js

let io = require( 'socket.io-client' );

Результатом этой компиляции является то, что оба этих модуля получают всю библиотеку socket-io, "связанную" с их кусками. Мое первоначальное ожидание состояло в том, что CommonsChunkPlugin поймает те requires и поместит эту большую библиотеку в общий фрагмент.

new webpack.optimize.CommonsChunkPlugin( 'common' ),

Не работает. Конечно, я всегда мог "разрешить" эту зависимость вручную, но я надеялся, что веб-пакет каким-то образом может сделать трюк?

Ответ 1

Ответ скрыт в конфигурации CommonsChunkPlugin

new webpack.optimize.CommonsChunkPlugin({
  name: 'main', // Important to use 'main' or not specify, since 'main' is default
  children: true, // Look for common dependencies in all children,
  minChunks: 2, // How many times a dependency must come up before being extracted
});

children: true является основной частью этой конфигурации. Из документов:

Если выбрано значение true для всех дочерних элементов пакета commons

Редактировать для общей строки aync

Если вы хотите загрузить асинхронно общий код в куске, вы должны изменить выше конфигурацию с добавлением async: true

new webpack.optimize.CommonsChunkPlugin({
  name: 'main',
  children: true, 
  minChunks: 2, 
  async: true, // modification
});

Из документов о async:

Если true, новый кусок async commons создается как дочерний элемент options.name и братьев из вариантов. Он загружается параллельно с options.chunks. Можно изменить имя выходного файла путем предоставления нужной строки вместо true.

Теперь в вашем примере создается дополнительный кусок, содержащий только socket.io-client. Это близко к оригинальному примеру в веб-документах.

Ответ 2

До сих пор я нашел одно возможное решение. Если вы используете метод require.include() для webpack, чтобы просто включить (не оценивать) "общую библиотеку, здесь socket.io-client" также в родительский модуль, здесь app.js, CommonChunkPlugin теперь сможет правильно разобраться.

require.include( 'socket.io-client' ); // import io from 'socket.io-client'; also works
require.ensure([ 'module1.js' ], ( require ) => {
    // at some point
    require( 'module1.js' );
}, 'Module1');

require.ensure([ 'module2.js' ], ( require ) => {
    // at some point
    require( 'module2.js' );
}, 'Module2');

Однако мне это не кажется правильным, так как это ручное решение зависимостей, которое на самом деле не то, что я хочу сделать, используя что-то вроде Webpack.