Так Google Документы и YouTube экономят более 500 КБ загрузки ресурсов.
Документы Google и YouTube используют аналогичный метод, чтобы сэкономить более 500 КБ при загрузке ресурсов. Этот простой метод быстро сократит время загрузки вашего приложения React.
Иногда в нашем приложении есть компоненты, которые должны быть скрыты на странице, если они не требуются. Типичный пример — ленивая загрузка картинок не во вьюпорте.
𝐇𝐨𝐰 𝐰𝐢𝐥𝐥 𝐭𝐡𝐢𝐬 𝐢𝐦𝐩𝐫𝐨𝐯𝐞 𝐦𝐲 𝐥𝐨𝐚𝐝𝐢𝐧𝐠 𝐭𝐢𝐦𝐞?
Этот простой метод позволяет нам сократить время первой загрузки, потому что мы не запрашиваем все фотографии сразу. Тот же метод можно применить к другим частям приложения.
Техника проста: мы не будем загружать в наше приложение те компоненты, которые не обязательно важны при загрузке приложения. Приложение будет загружать эти компоненты по мере необходимости, например: когда они находятся в области просмотра или при взаимодействии с пользователем.
Поскольку ресурсы загружаются по запросу, это сэкономит время загрузки, необходимое для извлечения этих ресурсов. Это очень эффективно в тех случаях, когда у вашего приложения есть несколько тяжелых компонентов для загрузки.
Документы Google и YouTube используют аналогичную технику, чтобы сэкономить более 500 КБ загрузки ресурсов.
𝐀 𝐬𝐢𝐦𝐩𝐥𝐞 𝐚𝐩𝐩 𝐭𝐨 𝐥𝐨𝐚𝐝 𝐡𝐞𝐚𝐯𝐲 𝐫𝐞𝐬𝐨𝐮𝐫𝐜𝐞 𝐨𝐧 𝐝𝐞𝐦𝐚𝐧𝐝
Это простое приложение для чата, которое по запросу загружает тяжелые компоненты для выбора смайликов.
Ссылка на демонстрацию: https://chat-app-eight-ashen.vercel.app
Приведенное выше приложение является простым примером этого варианта использования. Когда EmojiPicker отображается при нажатии кнопки эмодзи, react lazy определяет, должен ли быть виден компонент EmojiPicker на экране.
Затем начинается импорт модуля компонента. Приложение будет отображать загрузку во время импорта компонента.
Этот загрузочный компонент полезен в процессе. Поскольку компонент импортируется по запросу, нам нужна обратная связь для пользователя. Компонент загрузки информирует пользователя о том, что приложение не зависло: нужно только дождаться загрузки компонента.
Эти простые методы оказываются спасением при создании тяжелых приложений. Используйте этот метод с умом, потому что его использование с каждым компонентом может привести к снижению производительности.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
