Как Webpack справляется с динамическим импортом?
Этот вопрос проверяет понимание работы Webpack с динамическими импортами, которые помогают улучшить производительность приложения за счет загрузки кода по требованию.
Короткий ответ
Webpack поддерживает динамический импорт через функцию import(), позволяя загружать модули только тогда, когда они нужны. Это помогает разделять код на части (chunking) и сокращает время загрузки приложения.
Длинный ответ
Динамический импорт — это способ загрузки модулей по мере необходимости. Вместо традиционного статического импорта (import ... from ...) используется функция import(), которая возвращает промис. Webpack автоматически разделяет такие импорты на отдельные чанки (chunks).
Пример:
document.getElementById('load').addEventListener('click', () => {
import('./module.js')
.then((module) => {
module.default(); // Использование импортированного модуля
})
.catch((err) => console.error('Ошибка загрузки модуля:', err));
});Когда вы нажимаете кнопку, Webpack загружает файл module.js асинхронно. Это позволяет уменьшить начальный размер загружаемого JavaScript и оптимизировать загрузку ресурсоемких модулей.