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

Spread the love

Перевод: Justin BrooksLazy 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. Создавая наше приложение, мы видим, что оно создает большой файл сборки, который мы загружаем по первому запросу на наш сайт.

Alt Text

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

Мы можем использовать новую функцию 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>

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

Alt Text

Вернувшись в систему, мы также видим, что создается новый запрос на загрузку нашего компонента 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 отображается во время загрузки состояния.


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

Была ли вам полезна эта статья?
[4 / 3.5]

Spread the love
Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments
0
Будем рады вашим мыслям, пожалуйста, прокомментируйте.x
()
x