Отложенная загрузка компонентов во Vue 3

Перевод: Justin Brooks — Lazy loading components in Vue 3

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

Vue 3 представил несколько новых функций, которые помогут вам легко достичь этого за счет улучшений API асинхронного компонента и нового компонента Suspense. В этой статье мы рассмотрим использование компонентов отложенной загрузки в Vue 3, чтобы ускорить загрузку ваших страниц.

Посмотрите видео на YouTube, для которого была создана эта статья (English):

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

<template>
  <!-- ... -->
  <!-- Large component that uses many libraries -->
  <SecretImage v-if="isLoggedIn" />
  <!-- ... -->
</template>

<script>
import SecretImage from './components/SecretImage.vue'

export default {
  components: { SecretImage }
  // ...
}
</script>

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

Асинхронные компоненты

Мы можем использовать новую функцию defineAsynComponent, которая поставляется с Vue 3. Все, что нам нужно сделать, это передать функцию, которая загружает наши компоненты. Поскольку Vue поставляется с предварительно настроенным webpack, мы можем использовать функцию динамического импорта.

<template>
  <!-- ... -->
  <SecretImage v-if="isLoggedIn" />
  <!-- ... -->
</template>

<script>
import { defineAsyncComponent } from 'vue'
const SecretImage = defineAsyncComponent(() =>
  import('./components/SecretImage.vue')
)

export default {
  components: { SecretImage }
  // ...
}
</script>

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

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

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

import { defineAsyncComponent } from 'vue'
import Loading from './components/Loading.vue'

const SecretImage = defineAsyncComponent({
  loader: () => import('./components/SecretImage.vue'),
  loadingComponent: Loading
})

Однако использование этого подхода может быть ограниченым, так как сложно передать props или slots в загружаемый компонент.

Suspense

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

<template>
  <!-- ... -->
  <Suspense v-if="isLoggedIn">
    <template #default>
       <SecretImage />
    </template>
    <template #fallback>
       <Loading />
    </template> 
  </Suspense>
  <SecretImage v-if="isLoggedIn" />
  <!-- ... -->
</template>

<script>
import { defineAsyncComponent } from 'vue'
import Loading from './components/Loading.vue'

const SecretImage = defineAsyncComponent(() =>
  import('./components/SecretImage.vue')
)

export default {
  components: { SecretImage, Loading  }
  // ...
}
</script>

Теперь слот по умолчанию отображается, когда асинхронное содержимое загружено, а резервный слот #fallback отображается во время загрузки состояния.

Спасибо за прочтение!