0Pricing
Vue Academy · Урок

Ленивая загрузка и разделение кода

Разделяйте пакеты и загружайте компоненты и маршруты по требованию

«Ленивая загрузка и разделение кода» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Почему важен размер сборки

Когда всё приложение поставляется в одном большом файле JavaScript, пользователям приходится дольше ждать появления первого экрана. Разделение кода разбивает приложение на небольшие фрагменты, загружаемые только при необходимости, уменьшает первоначальный объём загрузки и ускоряет запуск.

Динамический import()

Главный инструмент — динамическая функция import(). В отличие от статического импорта в начале файла, она загружает модуль по требованию и возвращает промис. Сборщики разбивают каждый динамический импорт на отдельный фрагмент.

const module = await import("./heavyModule.js")
module.doSomething()

Разделение кода по маршрутам

Наибольший эффект даёт разделение по маршрутам, чтобы каждая страница загружала собственный код. В Vue Router передавайте функцию, возвращающую динамический импорт, вместо прямого импорта компонента.

const routes = [
  {
    path: "/dashboard",
    component: () => import("./views/Dashboard.vue")
  }
]

Статические и ленивые маршруты

Сравните два подхода. Статический импорт включает компонент в основной фрагмент, а ленивый вариант создаёт отдельный фрагмент, загружаемый только при посещении маршрута.

// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"

// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")

defineAsyncComponent

Чтобы лениво загружать компонент за пределами маршрутизатора, оберните динамический импорт в defineAsyncComponent. Vue загрузит его только при первой отрисовке.

import { defineAsyncComponent } from "vue"

const Chart = defineAsyncComponent(() =>
  import("./components/HeavyChart.vue")
)

Регистрация асинхронных компонентов

Зарегистрируйте асинхронный компонент так же, как любой другой, и используйте его в шаблоне. Vue прозрачно обработает загрузку.

export default {
  components: {
    HeavyChart: defineAsyncComponent(() =>
      import("./components/HeavyChart.vue")
    )
  }
}

Состояния загрузки и ошибки

Расширенная форма defineAsyncComponent принимает параметры для отображения заполнителя во время загрузки и резервного варианта при сбое.

const Chart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: Spinner,
  errorComponent: LoadError,
  delay: 200,
  timeout: 5000
})

Ленивая загрузка тяжёлых компонентов

Подходящими кандидатами для ленивой загрузки являются тяжёлые или редко используемые элементы: графики, редакторы форматированного текста, карты или модальные окна, которые открывают только некоторые пользователи.

const RichEditor = defineAsyncComponent(() =>
  import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shown

Условная загрузка с помощью v-if

Сочетайте асинхронный компонент с v-if, чтобы его фрагмент загружался только после действия пользователя.

<template>
  <button @click="showEditor = true">Edit</button>
  <RichEditor v-if="showEditor" />
</template>

Именованные фрагменты для отладки

Магические комментарии в стиле Webpack дают фрагментам понятные имена, благодаря чему сетевую вкладку и результат сборки проще анализировать.

const Reports = () => import(
  /* webpackChunkName: "reports" */ "./views/Reports.vue"
)

Оценка влияния

После разделения проверьте результат сборки или вкладку сети в браузере. Вы должны увидеть несколько небольших файлов фрагментов вместо одного большого пакета, а при начальной загрузке должно загружаться меньше кода.

Быстрая проверка

Проверьте свои знания о ленивой загрузке.

Итоги

Разделение кода с помощью динамического import() уменьшает начальный пакет. Для ленивых маршрутов используйте функцию, возвращающую импорт, а для компонентов, загружаемых по требованию, — defineAsyncComponent, при необходимости добавляя состояния загрузки и ошибки. Загружайте лениво тяжёлые или редко используемые части, чтобы ускорить запуск. Далее вы узнаете, как кэшировать и пропускать ненужную работу с помощью мемоизации.

Часто задаваемые вопросы

Урок «Ленивая загрузка и разделение кода» бесплатный?

Да — полный текст урока «Ленивая загрузка и разделение кода» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Ленивая загрузка и разделение кода»?

Разделяйте пакеты и загружайте компоненты и маршруты по требованию Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «Ленивая загрузка и разделение кода»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Ленивая загрузка и разделение кода
  2. Методы мемоизации
  3. Выявление и устранение узких мест
← Назад к Vue Academy