Мы поговорим о том, как ускорить загрузку начальной страницы вашего сайта. Если вы используете приложение React, то React уже использует более 30 КБ размера страницы. Поэтому, если ваша начальная загрузка страницы превышает 50 КБ (даже после сжатия gzip), это может вызвать проблемы с производительностью и плохое взаимодействие с пользователем.
Когда мы используем комплекты модулей, такие как Webpack, он создает большой комплект. Если у вас большое приложение, вам не нужно загружать 100% кода заранее, чтобы ваш сайт работал. Вот где помогает разделение кода. Таким образом, разделение кода означает, что вам не нужен весь код для запуска приложения при начальной загрузке страницы. Таким образом, мы можем разбить пакет на разные части и загружать их динамически, когда они нам нужны (по запросу).
React Loadable
Мы можем реализовать разделение кода с помощью React Loadable. React Loadable - это компонент более высокого порядка, который упрощает разделение пакетов. Он используется для загрузки компонентов с динамическим импортом. Чтобы понять, как React Loadable может помочь нам выполнить разделение кода и уменьшить размер начальной загрузки страницы, давайте посмотрим на это в действии.
Репозиторий Github: https://github.com/imranhsayed/react-app-webpack/tree/code-splitting-with-loadable
Установим react-loadable
npm i react-loadable
Теперь давайте создадим компонент под названием About.js
Теперь давайте добавим этот код в src / App.js. Обратите внимание, что мы импортируем здесь react-loadable.
Теперь давайте разберемся, что мы здесь сделали.
Если мы импортируем About.js из ./components/About в верхней части файла, он загрузит этот компонент синхронно во время рендеринга страницы и увеличит размер начальной загрузки страницы. Мы действительно хотим, чтобы этот компонент загружался асинхронно. Мы хотим загружать его только тогда, когда пользователь действительно нажимает на ссылку «О программе». С помощью import() webpack может разделить ваш код, когда вы добавляете новый.
Итак, что мы здесь сделали, так это то, что вместо того, чтобы импортировать его вверху, мы импортируем его динамически, используя Loadable().
Что делает Loadable(), так это то, что он загружает наш About компонент, когда кто-то достигает этого маршрута /about (когда компонент монтируется в DOM). Это дает нам возможность отображать любое сообщение (например, сообщение о загрузке), пока компонент не будет загружен, возвращая эту информацию внутри loading(). И loader принимает функцию, в которой мы определяем, какой компонент мы хотим импортировать.
Разница между импортом вверху и оператором импорта внутри Loadable() down ниже заключается в том, что оператор импорта вверху не является вызовом функции, а является объявлением модуля. Он статичен, и вы не можете использовать переменную сверху. Таким образом, вы можете статически анализировать свои пакеты.
Однако import() - это функция. Таким образом, его динамический и About компонент будет разделен на отдельный компонент.
Теперь запустим наш сервер и посмотрим, как он работает
npm run dev
Поэтому, если вы проверите демонстрационный gif выше, вы заметите, что About.js не загружается при начальной загрузке страницы. Вот почему, когда мы ищем текст «Это о программе» в связанном файле при начальной загрузке страницы, он говорит: No match found Однако, когда мы нажимаем ссылку «О программе», компонент About.js импортируется с помощью Loadable (). И теперь, когда мы ищем текст «This is About», мы можем его увидеть.
Вы также можете сделать code splitting для lodash и moment библиотек, так как это очень большие библиотеки, которые нужно загружать при начальной загрузке страницы.
Использование Service Workers
Вы можете сделать это еще быстрее, используя сервис-воркеров. Сервисные воркеры - это функции, которые вы можете установить в своем приложении и использовать сервисные воркеры в своем приложении в фоновом режиме. А после начальной загрузки страницы вы можете позволить работникам службы загрузить остальную часть импорта и сохранить ее в кэш-памяти. Так что при попадании в эти маршруты позже импорт может происходить быстро, поскольку они уже находятся в кэш-памяти.
Предварительная загрузка
Вы также можете предварительно загрузить свои пакеты с помощью rel=“prefetch”. Это работает, только если в системе пользователя достаточно батареи и хороший сигнал. Если у пользователя низкий заряд батареи и плохой сигнал, он проигнорирует предварительную выборку, а это именно то, что вам нужно. Вы бы не хотели сжигать батарею людей, когда она уже разряжена.
// public/index.html <script rel="prefetch" src="bundle.js"></script>
Маршруты - хорошее место, где вы можете использовать разделение кода. Однако вы также можете использовать его для модальных окон или любых других компонентов. которые отображаются только при необходимости.
