Как работает разбиение кода в webpack 4? Есть ли скрытый код, который делает запрос http для следующего чанка?

Question

Я пытаюсь понять, как работает разбиение кода в Webpack 4. Есть ли скрытый код, который отправляет http-запрос на следующий блок?

Дополнительный вопрос: если я разделю код между login.js (страница входа в систему) и app.js (реальное приложение), возможно ли перехватить вызов из login.js для следующего блока и на основе успешной аутентификации или нет, обслуживать app.js в случае успеха или служить error.js при неудачной аутентификации?

Answer 1

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

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

Для лучшего разделения кода: структурируйте свой компонент следующим образом: если аутентификация не удалась, вам следует перейти к следующему маршруту, чтобы он не был импортирован динамически.

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

Answer 2

Я пытаюсь понять, как работает разбиение кода в Webpack 4. Есть ли скрытый код, который отправляет http-запрос на следующий блок?

Да, есть логика веб-пакета, которая обрабатывает это для нас. Вам просто не нужно заботиться об этом.

Если я разделю код между login.js (страница входа) и app.js (реальное приложение), возможно ли перехватить вызов из login.js для следующего чанка и на основе успешной аутентификации или нет, обслуживать app.js если успешно или подать error.js при неудачной аутентификации?

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

Для динамического импорта требуется @babel/plugin-syntax-dynamic-import. Чтобы отметить это для веб-пакета, вы import('path.to.file') вам довольны. Это создает обещание, которое вам нужно выполнить и выполнить с ним все, что вам нужно.