Webpack 4: загружать модуль splitChunks через JS во время выполнения

Моя сборка веб-пакета выводит 3 пакета.

  1. Точка входа.
  2. код node_modules, сгенерированный splitChunks
  3. Извлеченный файл css.

Это библиотека, предназначенная для использования другими разработчиками, поэтому я не контролирую HTML, из которого загружается точка входа. Пользователь собирается включить точку входа с <script>, тогда мой код приложения должен каким-то образом загрузить пакеты 2 && 3, которые имеют хешированные имена.

Чтобы было ясно, я не хочу загружать модули с динамическим импортом (т. е. модули, которые вы устанавливаете npm, или файлы, которые вы импортируете), я хочу загружать выходной фрагмент веб-пакета, содержащий модули.

(На самом деле у меня есть 2 точки входа, поэтому существует пакет № 2, но я оставил его для простоты.)


webpack import webpack-4
person Eric Guan    schedule 15.09.2018    source источник
comment
поделитесь конфигурацией webpack, пожалуйста   -  person Sakhi Mansoor    schedule 15.09.2018

Ответы (1)


arrow_upward
2
arrow_downward

Webpack v4 имеет последние обновления. Раньше, если мы выполняли разделение кода, вы могли видеть в devTools браузера, initiator из main.bundle.js в *(index)*, что означает, что index.html запросил main.bundle.js. После этого все скрипты загружаются из bootstrap_a877…. (скрипт). Это скрипт Webpack, отвечающий за асинхронную загрузку файлов. Этот скрипт добавляется в сборку автоматически, когда вы используете функцию динамического импорта Webpack.

Но в webpack v4 у нас есть runtimeChunk, который фактически становится инициатором всех пакетов. Вы можете увидеть это в своих инструментах разработки. Вам нужно включить runtimeChunk

optimization: {
    runtimeChunk: 'single',
}

Надеюсь, это будет полезно.

Мой ответ на другой пост о разделении кода

person Sakhi Mansoor    schedule 15.09.2018
comment
Итак, это создает еще один файл js с именем runtime.js. Когда я загружаю его в html, он фактически не выполняет http-запросы для загрузки других фрагментов? - person Eric Guan; 18.09.2018
comment
Оно делает. Он просто сообщает браузеру, какие пакеты необходимо загрузить. - person Sakhi Mansoor; 18.09.2018
comment
@SakhiMansoor есть ли способ узнать, загружены ли все фрагменты? У меня есть случай, когда я ищу модуль при полной загрузке после загрузки runtime.js var module=window[moduleName] при использовании splitchunk с «одиночным» временем выполнения, который не определен, но когда я загружаю все модули вручную, он загружается правильно. - person Vipul Fadte; 10.03.2021