Фото Priscilla Du Preez @unsplash
Прочитайте эту статью в моем блоге
Большую часть времени у вас будут иметь части вашей страницы, которые содержат код и/или данные для компонента, который не будет виден сразу, если пользователь не щелкает где-то или прокручивает страницу. Загрузка Все эти ресурсы могут заблокировать основной нить и подтолкнуть, как скоро пользователи смогут взаимодействовать со страницей.
Это может повлиять на производительность вашего сайта на метрических инструментах, таких как Время интерактивности или Gtmetrix Отказ
Чем быстрее ваши пользователи могут взаимодействовать со страницей, тем лучше нет?
Lite YouTube встроить Проект Paul Irish является идеальным примером поддельной загрузки: он принимает идентификатор видео YouTube и представляет собой только миниатюру с помощью кнопки воспроизведения:
Когда кнопка воспроизведения нажата, это когда фактический проигрыватель YouTube загружается для воспроизведения видео. Делая это, время загрузки страницы резко уменьшается.
Вот полученная страница нагрузки с Lite YouTube встроенными:
И без:
Живая демонстрация
Комплексные диалоги/модали также являются хорошим корпусом для этого. Первоначально есть только кнопка, отображаемая где-то на странице. Когда пользователь нажимает на эту кнопку, модаль будет отображаться и позволит ему выполнять различные операции, довольно часто включающие использование сторонних библиотек или сложной бизнес-логики. Это где Импортно-взаимодействие Шаблон – это действительно хорошая подгонка, потому что вы не замедляете нагрузку на страницу с кодом, который пользователь может даже не использовать. Вот как это делается в Google Docs для диалогового окна «Поделиться»:
Когда кнопка нажата, диалоговое окно загружается, сохраняя 500КБ сценария для функции доли, откладывая его нагрузку до взаимодействия пользователей.
На самом деле это довольно удивительно, насколько это просто. Когда я узнал, я сразу же хотел вернуться на мои предыдущие проекты и реализовать его везде 😅
Вот действительно основной пример: скажем, вы хотели бы использовать Реагистрационный свиток Библиотека для приятно анимированного «прокрутки к верхней» функции, срабатываемой при нажатии кнопки. Вот что будет выглядеть ваш компонент без шаблона импорта на взаимодействия:
import { animateScroll as scroll } from "react-scroll";
const ScrollToTopBtn = () => {
const handleClick = () => {
scroll.scrollToTop();
};
return (
);
};
И с ленивой нагрузкой:
const LazyScrollToTopBtn = () => {
const handleClick = () => {
import("react-scroll").then(scroll => {
scroll.animateScroll.scrollToTop();
});
};
return (
);
};
Вот и все ! Довольно круто, верно? Кроме того, вы можете использовать деструктурирование объектов для импорта AnimateSCroll напрямую:
const handleClick = () => {
import("react-scroll").then(({animateScroll}) => {
animateScroll.scrollToTop();
});
};
Реакция поставляется со встроенным «кодовым разделением» вашего приложения, чтобы уменьшить размер вашего пучка. Но во-первых, что такое кодовое расщепление? Согласно оперативной документации по реагированию:
Код-расщепление Ваше приложение может помочь вам «ленивому нагрузке» только то, что в настоящее время необходимы пользователем, что может значительно улучшить производительность вашего приложения. Пока вы не снизили общий объем кода в вашем приложении, вы избежали загрузки кода, который пользователь может никогда не понадобиться и уменьшить объем кода, необходимого во время начальной нагрузки.
С Реагировать .Lazy Функция и Suspense Компонент, вы можете сделать динамический импорт в качестве регулярного компонента:
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
Loading... }>
Здесь Другой компактник будет загружен только когда MyComponent сначала оказывается. Suspense Позволяет управлять состоянием загрузки между рендерингом MyComponent и момент Другой компактник будет доступно. Это приведет к Другой компактник находясь в отдельном кусочке JavaScript. В некотором смысле, это похоже на показывать компонент в состоянии загрузки, получить данные из API, а затем показать компонент с данными. Только вот это не данные, которые вы «выбываете», это ваши собственные компоненты 😇
Примечание : Raction.lazy и suspense еще не доступны для рендеринга на стороне сервера. Если вы хотите сделать разделение кода в приложении к отображению сервера, React Team рекомендует Загружаемые компоненты Отказ
Я надеюсь, что вы, ребята, наслаждались этим постом. Это мой первый вклад здесь, как я недавно решил бросить вызов себе, чтобы начать вести блог. Английский не мой основной язык (простите мой французский …) И я не утверждаю, что будьте абсолютной реагированной легендой, так что не стесняйтесь, дайте мне знать, если вы не согласны с чем-либо здесь, или если вы хотите обсудить некоторые очки дальше. Как однажды сказал какой-то мудрый человек, объяснение является лучшим способом обучения и улучшения!
Оригинал: “https://dev.to/alarid/lazy-loading-with-react-292c”