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

Оптимизация производительности в приложении Vue.js - очень важный фактор, который следует учитывать. Приложение с более высокой оценкой производительности гарантирует, что пользователи получат максимум удовольствия от взаимодействия с пользователем.

Это также обеспечит эффективность самого приложения.

Что такое отложенная загрузка?

Ленивая загрузка гарантирует, что компоненты, прикрепленные с помощью синтаксиса отложенной загрузки, не загружаются, пока они не станут видимыми.

Ленивая загрузка, как следует из названия, - один из лучших способов повысить производительность приложения Vue.js.

Считается хорошей практикой отложить загрузку компонентов с помощью:

  • Переключенный контент
  • Боковые панели
  • Вкладки
  • Компоненты, которые недоступны или недоступны при начальной загрузке страницы
  • Модальные окна

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

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

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

Приведенный ниже фрагмент кода динамически импортирует компонент фотографий.

// dynamically import photos component

import Photos from “@/components/photos;”;

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

Чтобы отложить загрузку компонента, мы используем переменную на основе «const» и присоединяем стрелочную функцию, за которой следует динамический синтаксис импорта.

Как нам отложить загрузку компонентов?

Чтобы применить отложенную загрузку к компонентам Vue.js, нам нужно изменить импорт компонентов по умолчанию на компоненты на основе переменных «const», как показано ниже.

См. Пример ниже.


// lazy-loaded component

const Photos = () => import(/* webpackChunkName: “Photos” */ “@/components/photos”);

Вы видите имя комментируемого блока Webpack?

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

Это может быть важно при анализе пакетов.

Волшебные комментарии Webpack - это особые фразы, которые влияют на процесс сборки при использовании в комментариях. Один из таких волшебных комментариев - /* webpackChunkName: "component"*/. Просто поместите этот комментарий в функцию динамического импорта, и ваш ресурс будет предварительно загружен: Марку Оберленер.

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

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

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

Заключение

Напомним, что мы видели два разных способа импорта компонентов и лучшие практики для повышения производительности приложения Vue.js.

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

Спасибо, что прочитали эту статью. Если вы нашли эту статью полезной, не стесняйтесь поделиться ею.