Почему следует использовать разбиение кода с компонентами высшего порядка

1666818030 pochemu sleduet ispolzovat razbienie koda s komponentami vysshego poryadka

от Nitish Phanse

1*r36t-T5doFq1XGYIGHlwNA

Разделение кода может предложить некоторую передышку, когда дело доходит до загрузки больших клиентских программ. Мы живем в эпоху, когда продолжительность внимания пользователя составляет около 10 секунд на страницу, и вы точно не получите конверсию, если 6 секунд будет потрачено на выборку и анализ JavaScript.

Webpack 3 предлагает отличную поддержку динамического импорта. Это позволяет скачивать клиенту только полезные фрагменты. Компоненты высшего порядка в сочетании с динамическим импортом могут разделить ваш пакет JavaScript на несколько крошечных фрагментов. Недавно команда React добавила в свою документацию изящную страницу о разбивке кода.

Компоненты высшего порядка это функции, которые принимают компонент в качестве аргумента и возвращают другой компонент.

Да. Это было самое простое определение, которое я мог придумать, ничего особенного. Разделение кода пакета должно обрабатываться несколько по-другому, когда это выполняется в программах на стороне сервера, по сравнению с чистыми клиентскими программами.

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

Чистые клиентские программы

Это сокращенные программы index.html. Обычно они используются для аутентифицированных маршрутов (не требующих использования преимуществ SEO). Они полностью построены на стороне клиента.

Как правило, любой App.js будет выглядеть так, как показано ниже:

Для небольших программ приведенная выше структура работает. Но если на нашей веб-странице 20 маршрутов, мы создаем своего рода монстра. Поэтому динамически импортируем только те маршруты, которые нужны, когда пользователь переходит на эту страницу.

Это должно разделить ваш код на основе маршрутов. asyncComponent это функция, загружающая фрагмент компонента асинхронно. The LoadingComponent это заполнитель, который мы можем отображать при выполнении запроса.

1*Np1d8Oi5M8IGPVqslKIfPA
Webpack разбивает ваш пакет на части

Каждый раз, когда вы звоните своим ReactDOM.рендериты будет загружен соответствующий фрагмент. Таким образом, вы загружаете только маршруты, необходимые на странице, которую просматривает пользователь. Во время навигации к маршруту будет вызвана группа.

Серверные программы

Этот раздел, безусловно, интереснее предыдущего. Серверные программы создают строку разметки просматриваемой страницы и предоставляют ее клиенту. Тогда мы звоним гидрат метод. Сначала выполняется проверка различий, чтобы увидеть, совпадает ли дерево DOM нашего сервера с деревом, созданным на клиенте. Если это не то же самое, React выдаст предупреждение о том, что форма дерева не соответствует.

Если мы воспользуемся вышеприведенным методом для серверных программ, мы обязательно получим упомянутую ошибку. Почему? Сделайте шаг назад в минуту и ​​посмотрите, что происходит.

Первый запрос на страницу возвращает строку программы. Но когда срабатывает метод hydrate, он пытается получить пакет для запрашиваемой страницы. Из-за асинхронной природы получения, он загружает LoaderComponent на короткий промежуток времени. Когда компонент загружается, он повторно отображает страницу. Это создает эффект дрожания/зубчатости для нашего пользовательского интерфейса и выбрасывает ужасное несоответствие в предупреждении DOM.

Поэтому нам нужен лучший подход к решению этой проблемы.

  1. Также разделите наш код на стороне сервера
  2. Предварительно загрузите наши компоненты на стороне сервера
  3. Вызовите метод hydrate только после получения текущего пакета в контексте.
1*5RZK3o-vv_V95-R35MZBug

React загружается является достаточно крутым компонентом высшего порядка. Он выполняет все вышеперечисленное и его достаточно просто реализовать.

В вашем server.js:

Я свожу код к минимуму ради простоты.

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

const modules = [];
function fetchModuleName(moduleName: string) {  return modules.push(moduleName);}
const markup = ReactDOMServer.renderToString(  <Loadable.Capture report={fetchModuleName}>    <StaticRouter location={request.url} context={context}>      <App />    </StaticRouter>  </Loadable.Capture>);

Когда это сделано, давайте использовать ReactLoadableПлагин Webpack для создания фрагмента кода. Он поддерживает файл статистики, который позже будет использоваться сервером для определения того, какие пакеты обслуживать клиента.

const ReactLoadablePlugin = require(‘reactloadable/webpack’).ReactLoadablePlugin;
In webpack config
плагины: [  //Other plugins,
  new ReactLoadablePlugin({    filename: ‘./dist/build/react-loadable.json’,  })]

Так что наши маршруты разделены. Нам нужно позвонить гидрат только после того, как пакеты были получены с сервера, давайте разберемся с этим. Мы будем использовать ReactLoadables preloadReady метод.

window.main = () => {  Loadable.preloadReady().then(() => {    hydrate(      <BrowserRouter>        <ScrollHandler>          <App />        </ScrollHandler>      </BrowserRouter>,    document.getElementById(‘root’)    );  });};

Мы присоединили к a основной функцию для объекта окна, которое затем будет вызвано в размеченном файле нашего сервера.

Осталось всего несколько шагов. Теперь нам нужно сообщить нашему серверному файлу, какой соответствующий пакет получить. Затем вызовите основную функцию, чтобы клиентская программа могла взять на себя работу.

Итак, наш окончательный файл разметки будет следующим:

Несколько вещей, которые можно оптимизировать:

  1. Предварительное кэширование пакетов для наиболее часто посещаемых маршрутов. К примеру, вы можете использовать с домашней страницы, если пользователь, вероятно, перейдет на страницу входа или продуктов Loadable.preload() в компоненте DidMount домашней страницы. Здесь может пригодиться работник сферы обслуживания.
  2. Если вы не хотите блокировать основной поток, используйте веб-воркер. Использовать window.postMessage API и получить пакеты в фоновом режиме.
  3. React Loadable можно использовать для разделения пакетов любым удобным способом.
  4. Чтобы решить, какие фрагменты предварительно кэшировать, прочтите некоторые данные из библиотеки аналитики, смешайте панель / GA, чтобы увидеть, куда пользователи переходят с домашней страницы.

Обратная связь всегда приветствуется!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *