Автор оригинала: FreeCodeCamp Community Member.
Борисом Север
Реагирование 16.6 принесло кодовое расщепление на новый уровень. Теперь вы можете загрузить свои компоненты, когда это действительно нужно без установки дополнительных библиотек.
Что такое кодовая расщепление и ленивая нагрузка?
WebPack определяет кодовое расщепление как:
Другой способ сказать: «Загрузка по требованию или параллельно» – это Ленивый загрузка Отказ Противоположность ленивой нагрузки нетерпеливая загрузка Отказ Здесь все загружено независимо от того, используете его или нет.
Почему мы будем использовать кодовую расщепление и ленивую нагрузку?
Иногда мы должны представить большой кусок кода, чтобы охватить некоторые функциональные возможности. Этот код может импортировать 3-я партийную зависимость или написание ее на нашем собственном. Затем этот код влияет на размер основного связки.
Загрузка нескольких MBS – это кусок торта для современной скорости интернета. Мы все еще должны думать о пользователях с медленным подключением к Интернету или с помощью мобильных данных.
Как это было сделано до реагирования 16,6?
Вероятно, самая популярная библиотека для ленивой загрузки компонентов React – React-Loadable Отказ
Важно, чтобы Reactjs.org по-прежнему рекомендует React-Loadable Если ваше приложение отображается на сервере. [ Источник Несомненно
React-Loadable На самом деле довольно похож на новый подход реагированными. Я покажу это в следующей демонстрации.
Это что-нибудь нужно для настройки?
Посмотрим, что rectjs.org должен сказать об этом:
Хорошо, так WebPack Требуется, который обрабатывает динамический импорт пучков.
Следующая демонстрация генерируется с использованием Создайте приложение React. И в таком случае WebPack уже настроен, и мы готовы к работе.
Демонстрация
Для этой демонстрации мы будем использовать React-PDF Отказ React-PDF Потрясающая библиотека используется для создания файлов PDF на браузере, мобильном и сервере. Мы могли бы создавать PDF на сервере, но если бы мы предпочли бы сделать это на стороне клиента, он поставляется с стоимостью: Размер связки.
Допустим, наше требование состоит в том, чтобы генерировать файл PDF, когда пользователь нажимает на кнопку.
Теперь это простой вид только с одним корпусом. Постарайтесь представить огромное веб-приложение, в котором это фракция возможностей. Возможно, эта функциональность не используется очень часто пользователей.
Давайте встанем в эту ситуацию. PDF Generation не используется очень часто, и вам не имеет смысла загружать весь код для каждой страницы.
Я постараюсь показать, как мы можем разработать решение с ленивой нагрузкой и без него.
Желатель против ленивых погрузки витрина
Для обоих случаев мы будем использовать один компонент, который импортирует зависимости от React-PDF и делает простой документ PDF.
Здесь нет ничего впечатляющего. Мы импортируем PDFViewer , Документ , Страница , Текст , Вид от React-PDF Отказ Все они используются в оказывать метод Pdfpreview составная часть.
Pdfpreview получает только один опора называется Название Отказ Как подразумевает имя, он используется в качестве заголовка в вновь сгенерированном PDF-файле.
pdfstyles.js Похоже, это выглядит:
Нетерпеливая загрузка
Давайте сначала посмотрим, как выглядит родительский компонент без ленивой погрузки:
что делает следующий вид в браузере:
Давайте перейдем через код вместе:
На линии 2 мы импортируем Pdfpreview составная часть.
В строке 6 мы инициализируем состояние с значениями по умолчанию. Имя это поле, используемое в качестве заголовка в PDF-файле, в то время как поле Pdfpreview логический, который показывает или скрывает Pdfpreview Отказ
Теперь, давайте перейдем к оказывать Способ и проверьте, что будет оказано.
В линии 19 и 25 мы визуализируем вход и кнопку. Когда пользователь наносится на вход, Имя В состоянии изменено.
Затем, когда пользователь нажимает на «генерировать PDF», showpdfpreview установлен на правда Отказ Компонент повторно рендерирует и показывает Pdfpreview составная часть.
Хотя мы используем Pdfpreview Только на пользователя нажмите, все код, связанный с ним, включен в пакет App:
Ленивая загрузка
Мы сделали только небольшие изменения и давайте пройдемся через них.
Строка 2 заменяется: const.lazy (() => импорт ("./pdfpreview" ));
Посмотрим, что реагирует документы о реакции .Lazy:
На линии 27 мы используем Взять , который должен быть родителем ленивого компонента. Когда showpdfpreview установлен на правду, Lazypdfdocument начинает загружаться.
Пока дочерний компонент не будет решен, Взять показывает все, что предоставляется Запас пропры
Конечный результат выглядит так:
Мы можем видеть 0.chunk.js Вес значительно меньше, чем раньше и 4.Chunk.js и 3.chunk.js загружены на кнопку нажать.
Заключение
Каждый раз, когда мы представляем новую зависимость в ваш проект, наша ответственность состоит в том, чтобы оценить ее стоимость и проверять, как она влияет на основной пакет.
Тогда мы должны спросить, это эта функциональность будет использоваться редко, и мы можем загрузить его по требованию, не жертвуя пользовательским опытом.
Если ответ да, то Rect.Lazy и Взять Действительно помогите нам с этой задачей.
Спасибо за чтение! Пожалуйста, поделитесь этим с кем-то, кто может найти его полезным и оставить отзыв.