Ленивые загрузки модулей Webpack из изоморфных компонентов (общий код между сервером и клиентом)

Question

Допустим, у меня есть сервер экспресс-узлов и приложение JavaScript на стороне клиента.

Оба используют одни и те же компоненты.

Javascript на стороне клиента связан через webpack.

Естественно, некоторые библиотеки нужны только на стороне клиента.

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

Когда у меня было только приложение на стороне клиента, я использовал его вфункция, которая будет вызываться только на стороне клиента:

await import( /* webpackChunkName: "tinymce" */ 'tinymce' );

Вместе с использованием опции chunkFilename: в директиве вывода webpacks это привело к загрузке модуля только по запросу.

К сожалению, это не работает при запуске кода с узлом, так как метод импорта недоступен.

Если я теперь использую эквивалент узла, вместо этого требуется вызов внутри функции:

require( 'tinymce' );

Webpack включает в себя всю зависимость внутри точки входа и больше не разделяет чанк.

Как использовать отложенную загрузку модулей при совместном использованиикодовая база между сервером и клиентом без необходимости переноса кода узла?

Answer 1

Возможно повторное использование одного и того же кода в узле и на стороне клиента без необходимости переноса кода на стороне сервера.

Он работает с использованием require.ensure() вместо только require():

// Returns a promise that resolves with the Module
require.ensure( [], ( require ) => require( 'pikaday' ) )

Узел не будет жаловаться, и если вы определяете chunkFilename в своей директиве webpack.config.js output, webpack успешно поместит модуль в свой собственный файл, который будет загружен при необходимости.

Я протестировал это только с модулями, которые мне нужны только на стороне клиента, и вызвал их условно, проверив, является ли typeof document === 'object', как require.ensure, на самом деле не стандартным методом, а специфичным для веб-пакета.Так что, вероятно, не будет работать, если вам нужен модуль как на стороне клиента, так и на стороне сервера , хотя вы можете попробовать использовать полизаполнение для require.ensure для узла.