Ленивая загрузка компонентов

Ленивая загрузка (lazy loading) компонентов в Vue и Vuetify — это техника, позволяющая загружать компоненты только тогда, когда они действительно нужны, а не при инициализации всего приложения. Это значительно ускоряет старт приложения и уменьшает начальный размер бандла. В Vuetify ленивая загрузка особенно актуальна для тяжелых компонентов, таких как таблицы данных, графики и сложные формы.

Динамический импорт компонентов

Основной механизм ленивой загрузки — использование динамического импорта JavaScript. В Vue 3 и Vuetify 3 это реализуется через функцию defineAsyncComponent из пакета vue.

Пример базового синтаксиса:

import { defineAsyncComponent } from 'vue';

export default {
  components: {
    MyHeavyComponent: defineAsyncComponent(() =>
      import('@/components/MyHeavyComponent.vue')
    )
  }
};

Пояснения:

defineAsyncComponent принимает функцию, которая возвращает промис с импортом компонента.
Компонент загружается только при рендере, когда он впервые используется в шаблоне.
Путь @/components/... указывает на компонент относительно корня проекта.

Использование с Vuetify

В Vuetify ленивую загрузку удобно применять для компонентов, которые не сразу отображаются на странице, например, в табах (v-tabs) или диалогах (v-dialog).

Пример с диалогом:

<template>
  <v-btn @click="dialog = true">Открыть компонент</v-btn>
  <v-dialog v-model="dialog" max-width="600">
    <MyHeavyComponent />
  </v-dialog>
</template>

<script>
import { defineAsyncComponent, ref } from 'vue';

export default {
  setup() {
    const dialog = ref(false);
    const MyHeavyComponent = defineAsyncComponent(() =>
      import('@/components/MyHeavyComponent.vue')
    );

    return { dialog, MyHeavyComponent };
  }
};
</script>

Здесь компонент MyHeavyComponent загружается только при открытии диалога, а не при первоначальном рендере страницы.

Настройка индикатора загрузки

defineAsyncComponent поддерживает опции для отображения индикатора загрузки и обработки ошибок:

const MyHeavyComponent = defineAsyncComponent({
  loader: () => import('@/components/MyHeavyComponent.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: LoadError,
  delay: 200,
  timeout: 3000
});

Параметры:

loader — функция динамического импорта.
loadingComponent — компонент, который отображается, пока основной компонент загружается.
errorComponent — компонент, показываемый при ошибке загрузки.
delay — задержка перед отображением индикатора загрузки.
timeout — время, после которого загрузка считается неудачной.

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

Для больших приложений с маршрутизацией ленивую загрузку компонентов часто применяют на уровне маршрутов с vue-router. Это снижает размер бандла, загружая только текущий маршрут.

Пример с Vue Router 4 и Vuetify:

import { createRouter, createWebHistory } from 'vue-router';
import { defineAsyncComponent } from 'vue';

const routes = [
  {
    path: '/dashboard',
    component: defineAsyncComponent(() => import('@/views/Dashboard.vue'))
  },
  {
    path: '/settings',
    component: defineAsyncComponent(() => import('@/views/Settings.vue'))
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Оптимизация производительности

Для крупных компонентов стоит использовать разделение кода (code splitting) и webpack chunk names:

const MyHeavyComponent = defineAsyncComponent(() =>
  import(/* webpackChunkName: "heavy-component" */ '@/components/MyHeavyComponent.vue')
);

Это позволяет webpack создавать отдельный файл бандла для компонента, что облегчает кэширование и повторное использование.

Особенности работы с Vuetify

Компоненты Vuetify, как v-data-table, v-calendar или v-file-input, могут быть тяжелыми из-за встроенных стилей и функциональности. Их ленивый импорт снижает нагрузку на главный бандл.
В шаблонах рекомендуется использовать v-if для ленивых компонентов, чтобы гарантировать, что они не рендерятся до необходимости.
Для многокомпонентных страниц полезно сочетать ленивую загрузку с динамическими слотами, чтобы минимизировать начальную загрузку DOM.