Разделение пакетов и отложенная загрузка — Reactjs и Webpack

Ленивая загрузка модулей и разделение пакетов Webpack (React, Webpack и Babel)

Спойлер

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

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

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

Если игрок собрал ВСЕ части, чтобы увидеть ТОЛЬКО часть головоломки, это будет пустой тратой времени, и он будет выполнять ненужные действия и логику, которые не будут отражены в части головоломки.

Представьте себе робота, которому, если вы скажете ему, какую область вы хотите видеть, он даст вам право и единственные части, необходимые для сборки, чтобы просмотреть подобласть, которую вы намеревались увидеть.

Поэтому всякий раз, когда мы собираем часть головоломки, мы сохраняем ее собранной, чтобы в конечном итоге собрать всю головоломку.

Полный продвинутый курс React на Udemy

Соединение точек

Допустим, у вас есть приложение, которое включает

• Страница входа «кусочки головоломки»
• Таблица Страница «кусочки головоломки» (некоторые данные в таблице)
• Графики Страница «кусочки головоломки» (некоторая аналитика, много диаграмм d3)

Когда какой-либо пользователь загружает ваше приложение и намеревается увидеть TablePage, это будет пустой тратой времени:

• Время ожидания
• Сетевые запросы
• Тяжелая загрузка

следовательно, это приведет к плохому UX, если мы загрузим в память также GraphsPage

Модульность

Разделение нашего приложенияModular (Modular Programming) и наших интересов является ключевой концепцией для достижения наших целей

Webpack, React и Babel

• React 16.8+ предлагает ленивую загрузку для компонентов (https://reactjs.org/docs/code-splitting.html)
• babel-plugin-syntax-dynamic-import предлагает синтаксический анализ динамического импорта
• Webpack предлагает разделение каждого оператора динамического импорта на пакеты.

Комбинируя эти предложения, мы можем получить хороший и красивый компонент для разделения пакетов с загрузчиком и резервным компонентом (spinner, progress…).

Компонент многократного использования

loadable.js

import React, { lazy, Suspense } from 'react';
export default (importCallback, { loader }) => {
    const TargetComponent = lazy(importCallback);
    return props => (
        <Suspense fallback={loader}>
            <TargetComponent {...props} />
        </Suspense>
    );
};

Использование

GraphsPageLoader.js

export default loadable(() => import(/* webpackChunkName: "GraphsPage" */ './GraphsPage'));

Когда Webpack встречает подобный оператор, он разделяет этот модуль ./GraphsPage и его собственные подмодули на отдельный файл пакета (чанка) с именем, указанным в webpackChunkName.

Мой полный курс на Udemy:

Продвинутый курс React Ninja

Подведение итогов

• Загрузка ресурсов занимает некоторое время, и применение логики к этим ресурсам также требует некоторого времени вычислений. Если мы будем строго загружать только необходимые ресурсы, мы добьемся лучшей производительности приложения и лучшего ART.
• Когда мы открываем LoginPage, мы не будем загружать также TablePage и GraphsPage, поэтому мы сократили время загрузки нашего приложения на треть (приблизительно оценивая худший случай).
• Когда мы переходим к TablePage, нам не нужно также вычислять все диаграммы d3, которые находятся на GraphsPage, поэтому мы сократили время загрузки TablePage и не отправляли никаких дополнительных сетевых запросов для GraphsPage.
• С точки зрения масштабируемости, следует строго управлять загрузкой ресурсов, что обеспечивает здоровую производительность приложения и хорошее взаимодействие с пользователем.

Ресурсы:

для получения дополнительной информации [email protected]