Асинхронная загрузка Vue 2 компонента при вхождении в область реагирования триггера

Плагин находится на стадии тестирования

Демо - https://async-loading-vue-component.netlify.app/

Установка

npm i @popovdk/async-loading-vue-component

import Vue from 'vue'
import AsyncLoadingVueComponent from '@popovdk/async-loading-vue-component'

Vue.use(AsyncLoadingVueComponent)

О плагине

Плагин async-loading-vue-component позволяет асинхронно загружать Vue 2 компоненты когда в область просмотра браузера пользователя попадает некий триггер или его область. Это в разы улучшает быстродействие приложения и пользовательский опыт.

Принцип работы основан на IntersectionObserver, плагин предоставляет два компонента: AsyncLoading создает и настраивает триггер - обычный html элемент, загружает асинхронный компонет и берет пропсы, евенты, слоты из AsyncComponent и пробрасывает их на будущий компонент, когда он загрузится, соберется он встает в DOM вместо тригера.

AsyncLoading

Компонент для асинхронной загрузки компонентов когда в зону просмотра браузера пользователя попадает триггер. Основан на IntersectionObserver - https://developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API

• slots
  • default - Если асинхронно загружаемому компоненту требуется проброс пропсов, евентов, слотов, то обязятельно должен передаваться AsyncComponent и все это должно передаваться ему как будто это тот самый компонент который будет загружен
  • loader - Будет показывается пока асинхронно загружаемый компонент не попадает в DOM
• props
  • component - Функция для асинхронной загрузки компонента, например () => import('@/components/MapLocation')
  • triggerTag - название тега для тригера, по умолчанию это div
  • rootMargin - Виртуальные отступы вокруг тригера которые позволяют расширить зону реагирования. Могут иметь значения как свойство css margin: "10px 20px 30px 40px" (top, right, bottom, left). Значения можно задавать в процентах. По умолчанию все параметры установлены в нули.
  • threshold - Число или массив чисел, указывающий, при каком проценте видимости целевого элемента должена начаться загрузка компонента. Например, в этом случае будет начинаться загрузка при появлении в зоне видимости каждый 25% целевого элемента: [0, 0.25, 0.5, 0.75, 1], по умолчанию 0 тоесть при любом контакте с зоной тригера начнется загрузка.
• events
  • intersecting - Зона тригера пересеклась с зоной просмотра, начало загрузки чанка компонента
  • loaded - Чанк компонента загружен, начало сборки компонента
  • make - компонент собран и смонтирован в DOM вместо тригера

Пример использования:

<async-loading
  :component="() => import('@/components/MapLocation')"
  :threshold="0"
  root-margin="300px"
>
  <async-component
    :coords="[
      54.82896654088406,
      39.831893822753904
    ]"
    zoom="10"
    @click="clickHandler"
  >
    Какой то текст в default слоте
    <template #title> Тестовый заголовок из слота title </template>
  </async-component>
</async-loading>