Выбор ответа Junior Сборщики обновлено
Что делает динамический import()
Вопрос
Что произойдёт при сборке этого кода Vite или webpack?
button.onclick = async () => {
const { renderChart } = await import('./chart.js');
renderChart(data);
};
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: chart.js вынесется в отдельный чанк и загрузится при первом клике. Динамический import() это точка разделения: сборщик выносит модуль и его уникальные зависимости в отдельный чанк и грузит его сетью, когда вызов выполнится. - Попадание в основной бандл противоречит смыслу code splitting. - import()…
Варианты ответа
- chart.js войдёт в основной бандл, import() просто выполнится позже
- chart.js вынесется в отдельный чанк и загрузится при первом кликеправильный ответ
- Сборка упадёт: await import нельзя внутри обработчика
- chart.js загрузится сразу при старте страницы, но выполнится при клике
Разбор
Динамический import() это точка разделения: сборщик выносит модуль и его уникальные зависимости в отдельный чанк и грузит его сетью, когда вызов выполнится.
- Попадание в основной бандл противоречит смыслу code splitting.
import()возвращает промис и законен в любой async-функции.- Без явного prefetch/preload чанк не грузится на старте.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.