Разделение кода и динамический импорт
Автоматически разделяйте пакет по маршрутам и используйте динамический import() для загрузки фрагментов по требованию.
«Разделение кода и динамический импорт» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Автоматическое разделение
SvelteKit автоматически разделяет пакеты по маршрутам. Посетители загружают только JS для тех маршрутов, которые они посещают.
Динамический импорт
Для более детального разделения используйте динамический import(), чтобы загружать модули по мере необходимости.
const Heavy = (await import("./Heavy.svelte")).default;Условная загрузка
Загружайте тяжёлую библиотеку только тогда, когда она требуется для определённого действия пользователя.
async function openEditor() {
const { default: Editor } = await import("./Editor.svelte");
// ...
}Именование фрагментов
Vite разумно именует фрагменты. При необходимости можно использовать комментарии в стиле webpackChunkName, чтобы задать подсказку.
Предварительная загрузка
Используйте data-sveltekit-preload-code, чтобы предварительно загружать код маршрута при наведении.
Размер пакета
Меньшие начальные пакеты означают более быструю загрузку страниц и лучшие основные веб-показатели.
Удаление неиспользуемого кода
SvelteKit (через Vite/Rollup) автоматически удаляет неиспользуемые экспорты.
Ленивые компоненты
Оберните динамические импорты в компоненты, которые отображаются после загрузки.
Подводные камни
Динамические импорты добавляют асинхронные границы. Корректно обрабатывайте состояния загрузки.
Анализ пакета
Используйте визуализаторы пакетов, чтобы определить, что разделить следующим.
Когда не следует разделять
Для крошечных модулей затраты на разделение превышают экономию. Проведите профилирование, чтобы найти подходящую степень детализации.
Быстрая проверка
Как SvelteKit по умолчанию разделяет пакеты?
Итоги
Разделение кода в SvelteKit выполняется автоматически по маршрутам. Используйте динамический import() для более детальной ленивой загрузки.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Разделение кода и динамический импорт» бесплатный?
Да — полный текст урока «Разделение кода и динамический импорт» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Разделение кода и динамический импорт»?
Автоматически разделяйте пакет по маршрутам и используйте динамический import() для загрузки фрагментов по требованию. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Разделение кода и динамический импорт»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Разделение кода и динамический импорт
- Оптимизация изображений с @sveltejs/enhanced-img
- Отложенная загрузка компонентов
- Профилирование приложений SvelteKit