Автор оригинала: FreeCodeCamp Community Member.
Nitish Phanse.
Код расщепления Может предложить некоторую передышку, когда речь идет о загрузке массивных клиентских приложений. Мы находимся в эпоху, где охватывает внимание пользователя, вероятно, близок к 10 секундам на странице, и вы определенно не собираетесь получить преобразование, если 6 секунд проводится вытеснение и распределяет ваш JavaScript.
WebPack 3 предлагает блестящую поддержку динамического импорта. Это позволяет загружать только полезные куски клиенту. Компоненты более высокого порядка в сочетании с динамическим импортировочным импортием могут разделить свой JavaScript Bundle на несколько крошечных кусков. Недавно команда RACT добавлена гладкая страница на коде, расщеплении в их Документация Отказ
Компоненты высшего порядка Функции, которые принимают компонент в качестве аргумента и возврат другого компонента.
да. Это было самое простое определение, которое я мог бы подумать, ничего необычно. Кодовое расщепление вашего пакета должно быть немного по-разному обрабатывается по-разному, когда это сделано на серверных командах приложений по сравнению с чистыми клиентскими приложениями.
Я разделил эту статью в Два части. Первая часть объясняет расщепление кода в чистых клиентских приложениях. Вторая часть объясняет расщепление кода на приложениях. Оба метода используют компоненты более высокого порядка.
Pure Client Apps
Это приложения, которые имеют отделение index.html Отказ Они обычно используются для аутентифицированных маршрутов (которые не нужно использовать преимущества SEO). Они полностью построены на стороне клиента.
Как правило, любой App.js будет выглядеть как один ниже:
Для крошечных приложений вышеуказанная структура работает. Но если у нас есть 20 маршрутов на нашу веб-страницу, то мы создаем немного монстра. Таким образом, мы динамически импортируем только эти маршруты, необходимые после того, как пользователь навигается на эту страницу.
Это должно разделить свой код на основе маршрутов. AsyncComponent это функция, которая загружает компонентный кусок асинхронно. OrdingComponent это заполнитель, который мы можем отображать, пока запрос завершен.
Всякий раз, когда вы называете свой Реагировать Отказ оказывать Метод, соответствующий кусок будет загружен. Таким образом, вы загружаете только маршруты, необходимые на странице, что пользователь просмотрен. При навигации по маршруту подходящий пакет будет призван.
Сервер представлен приложения
Этот раздел определенно более интересен, чем первый. Приложения для представленного сервера создают строку разметки страницы в поле зрения и обслуживайте ее к клиенту. Тогда мы называем гидрат метод. Сначала он делает различиею, чтобы увидеть, является ли наш серверный DOM DOM такой же, как тот, который сделан на клиенте. Если это не то же самое, отреагировать будет бросать предупреждение, говоря, что в форме дерева было несоответствие.
Если мы следуем вышеупомянутым способом для серверов, представленных приложениями, мы обязательно получим упомянутую ошибку. Почему?? Сделайте шаг назад на минуту и посмотрите, что происходит.
Первый запрос на страницу возвращает строку приложения. Но когда метод гидрата пинает, он пытается получить расслоение для запрошенной страницы. Из-за асинхронизации привлечения, она загружает LoaderComponent на короткий момент времени. Когда компонент получен, он переназначает страницу. Это дает в нашу интернет-интерфейс на нашу интернет-интерфейс джитрия/зазубренного заболеваниями и выплескивая страшное несоответствие в доме.
Поэтому нам нужен лучший подход к решению этой проблемы.
- Разделите наш код на стороне сервера тоже
- Предварительно загрузить наши компоненты на стороне сервера
- Вызовите метод гидратата только после того, как текущий пучок в контексте был получен.
Реагировать нагрузки довольно прохладный компонент высшего порядка. Это делает все вышеперечисленное и довольно просто реализовать.
В вашем server.js:
Я держу код до минимума ради простоты.
Теперь давайте выберем пакет на стороне сервера. Мы будем использовать метод захвата RaceLoadable, который создаст карту пучков, необходимых для этого куска.
const modules = [];
function fetchModuleName(moduleName: string) { return modules.push(moduleName);}const markup = ReactDOMServer.renderToString();
Как только это сделано, давайте использовать РЕКТИРОВАНИЕ WebPack Plugin для создания кусочков кода. Он поддерживает файл статистика, который позже будет использоваться файлом сервера на карту, которые будут служить клиенту.
const ReactLoadablePlugin = require('reactloadable/webpack').ReactLoadablePlugin;In webpack config
plugins : [ //Other plugins,
new ReactLoadablePlugin({ filename: './dist/build/react-loadable.json', })]Так что наши маршруты разделены. Нам нужно позвонить в гидрат Способ только после того, как пучки были извлечены с сервера, так что давайте рассмотрим это. Мы будем использовать Reacloadables Preloadready метод.
window.main = () => { Loadable.preloadReady().then(() => { hydrate( , document.getElementById('root') ); });};Мы приложили Главная Функция к окну объекта, который затем вызван в нашем сервере помеченным файлом.
Осталось всего несколько шагов. Теперь нам нужно сказать наш файл сервера, который подходит для вывода. После этого сделано, вызовите основную функцию, чтобы приложение для клиента может захватить.
Итак, наш последний файл разметки будет таким:
Несколько вещей можно оптимизировать на:
- Паланки предотвращают наиболее часто посещаемые маршруты. Например, с домашней страницы, если пользователь может перейти к странице входа в систему или продукты, вы можете использовать Loadable.Preload () В компонентеdidmount домашней страницы. Сервисный работник может быть удобным здесь.
- Если вы не хотите блокировать основную нить, используйте веб-работник. Используйте window.postmessage API и принести пачки на заднем плане.
- Реагистрационные нагруженные могут быть использованы для локальных пучек в любом порядке.
- Чтобы решить, какие куски для предварительного кэша, прочитайте некоторые данные с вашей библиотеки аналитики, Mix Panel/GA, чтобы увидеть, где пользователи навигации с домашней страницы.
Обратная связь всегда приветствуется!
Оригинал: “https://www.freecodecamp.org/news/code-splitting-with-higher-order-components-4ac8f094b059/”