Значительное ускорение вашего фронтенд-приложения на React с помощью ленивой загрузки

Russian (Pусский) translation by Alexey Pyltsyn (you can also view the original English article)

Постоянная задача, с которой сталкиваются фронтенд-разработчики — это производительность наших приложений. Как мы можем предоставить надежное и полнофункциональное приложение для наших пользователей, не заставляя их ждать вечность, пока загрузится страница? Методы, используемые для ускорения работы сайта, настолько многочисленны, что часто можно запутаться с решением, на котором сосредоточиться для оптимизации производительности и скорости.

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

Что значит быстрый сайт?

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

Для целей статьи я собираюсь сосредоточиться на первой части этого определения — отправке наименее возможного количества информации в браузер пользователя.

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

React Loadable

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

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

1. Добавить React `Loadable` к вашему компоненту

Я приведу пример компонента React, MyComponent. Я предполагаю, что этот компонент состоит из двух файлов: MyComponent/MyComponent.jsx и MyComponent/index.js.

В этих двух файлах я определяю React-компонент точно так же, как обычно в MyComponent.jsx. В файле index.js я импортирую компонент React и повторно экспортирую его — на этот раз завернутый в функцию Loadable. Используя возможность import из ECMAScript, я могу указать Webpack, что ожидаю, что этот файл будет динамически загружен. Этот шаблон позволяет мне легко сделать ленивую загрузку любого компонента, который я уже написал. Это также позволяет мне отделять логику между ленивой загрузкой и отрисовкой. Это может показаться сложным, но вот как это будет выглядеть на практике:

// MyComponent/MyComponent.jsx

export default () => (
  <div>
    This component will be lazy-loaded!
  </div>
)

// MyComponent/index.js

import Loadable from 'react-loadable'

export default Loadable({
  // The import below tells webpack to 
  // separate this code into another bundle
  loader: import('./MyComponent')
})

Затем я могу импортировать свой компонент точно так, как обычно:

// anotherComponent/index.js

import MyComponent from './MyComponent'

export default () => <MyComponent />

Теперь я импортировал React Loadable в компонент MyComponent. Я могу добавить больше логики для этого компонента позже — это может включать введение состояния загрузки или обработчика ошибок в компонент. Благодаря Webpack, когда мы запускаем нашу сборку, теперь мне будут предоставлены два отдельных JavaScript-бандла: app.min.js — наш обычный бандл приложений, а в файле myComponent.min.js содержит код, который мы только что написали. Я расскажу, как загружать эти пакеты в браузер чуть позже.

2. Упрощение установки с помощью Babel

Обычно я должен включать два дополнительных параметра при передаче объекта функции Loadable, modules и webpack. Они помогают Webpack определять, какие модули мы должны включать. К счастью, мы можем избавиться от необходимости включать эти две опции в каждом компоненте, используя плагин react-loadable/babel. Он автоматически включает в себя следующие опции:

// input file

import Loadable from 'react-loadable'

export default Loadable({
  loader: () => import('./MyComponent')
})

// output file 

import Loadable from 'react-loadable'
import path from 'path'

export default Loadable({
  loader: () => import('./MyComponent'),
  webpack: () => [require.resolveWeak('./MyComponent')],
  modules: [path.join(__dirname, './MyComponent')]
})

Я могу включить этот плагин, добавив его в свой список плагинов в моем файле .babelrc, например:

1	{
2	"plugins": ["react-loadable/babel"]
3	}

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

3. Отрисовка компонентов на сервере

В моем приложении сервера у меня есть стандартная конфигурация, которая выглядит примерно так:

// server/index.js

app.get('/', (req, res) => {
  const markup = ReactDOMServer.renderToString(
    <MyApp/>
  )

  res.send(`
    <html>
      <body>
        <div id="root">${markup}</div>
        <script src="/build/app.min.js"></script>
      </body>
    </html>
  `)
})

app.listen(8080, () => {
  console.log('Running...')
})

Первым шагом будет указание пакету React Loadable, что все модули должны быть предварительно загружены. Это позволяет мне решить, какие из них должны быть немедленно загружены на клиенте. Я делаю это, изменяя файл server/index.js следующим образом:

// server/index.js 

Loadable.preloadAll().then(() => {
  app.listen(8080, () => {
    console.log('Running...')
  })
})

Следующим шагом будет передача всех компонентов, которые я хочу отобразить, в массив, чтобы позже определить, какие компоненты требуют немедленной загрузки. Это значит, что HTML может быть возвращен с корректным JavaScript-пакетами, включенными через теги script (подробнее об этом позже). На данный момент я собираюсь изменить свой файл сервера следующим образом:

// server/index.js

import Loadable from 'react-loadable'

app.get('/', (req, res) => {
  const modules = []
  const markup = ReactDOMServer.renderToString(
    <Loadable.Capture report={moduleName => modules.push(moduleName)}>
      <MyApp/>
    </Loadable>
  )

  res.send(`
    <html>
      <body>
        <div id="root">${markup}</div>
        <script src="/build/app.min.js"></script>
      </body>
    </html>
  `)
})

Loadable.preloadAll().then(() => {
  app.listen(8080, () => {
    console.log('Running...')
  })
})

Каждый раз, когда используется компонент, который требует React Loadable, он будет добавлен в массив modules. Это автоматический процесс, выполняемый React Loadable, так что это все, что требуется сделать с нашей стороны.

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

4. Сопоставление пакетов Webpack с модулями

Итак, теперь я поручил Webpack создать myComponent.min.js, и я знаю, что MyComponent используется немедленно, поэтому мне нужно загрузить этот пакет в исходный бандл HTML, которую мы доставляем пользователю. К счастью, React Loadable дает нам возможность достичь этого. В моем конфигурационном файле клиента Webpack мне нужно включить новый плагин:

// webpack.client.config.js

import { ReactLoadablePlugin } from 'react-loadable/webpack'

plugins: [
  new ReactLoadablePlugin({
    filename: './build/loadable-manifest.json'
  })
]

Файл loadable-manifest.json предоставит мне сопоставление между модулями и пакетами, чтобы я мог использовать ранее установленный массив модулей (modules), чтобы загрузить пакеты, которые, как я знаю, мне понадобятся. В моем случае этот файл может выглядеть примерно так:

// build/loadable-manifest.json

{
  "MyComponent": "/build/myComponent.min.js"
}

Для этого также потребуется общий файл манифеста Webpack для включения сопоставления между модулями и файлами для внутренних целей Webpack. Я могу сделать это, включив еще один плагин Webpack:

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    minChunks: Infinity
  })
]

5. Включение бандлов в HTML

Последним шагом в загрузке наших динамических бандлов на сервере — это их включение в HTML-код, который мы доставляем пользователю. Для этого шага я собираюсь объединить вывод шагов 3 и 4. Я могу начать с изменения файла сервера, который я создал выше:

// server/index.js

import Loadable from 'react-loadable'
import { getBundles } from 'react-loadable/webpack'
import manifest from './build/loadable-manifest.json'

app.get('/', (req, res) => {
  const modules = []
  const markup = ReactDOMServer.renderToString(
    <Loadable.Capture report={moduleName => modules.push(moduleName)}>
      <MyApp/>
    </Loadable>
  )
  
  const bundles = getBundles(manifest, modules)

  // My rendering logic below ...
})

Loadable.preloadAll().then(() => {
  app.listen(8080, () => {
    console.log('Running...')
  })
})

В этом я импортировал файл манифеста и попросил React Loadable создать массив с отображением модулей/бандлов. Единственное, что мне осталось сделать — это отрисовать эти пакеты в HTML-строку:

// server/index.js

app.get('/', (req, res) => {
  // My App & modules logic

  res.send(`
    <html>
      <body>
        <div id="root">${markup}</div>
        <script src="/build/manifest.min.js"></script>
        ${bundles.map(({ file }) =>
          `<script src="/build/${file}"></script>`
        }).join('\n')}
        <script src="/build/app.min.js"></script>
      </body>
    </html>
  `)
})

Loadable.preloadAll().then(() => {
  app.listen(8080, () => {
    console.log('Running...')
  })
})

6. Загрузка отрисовываемых на сервере бандлов на клиенте

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

// client/index.js

import React from 'react'
import { hydrate } from 'react-dom'
import Loadable from 'react-loadable'

import MyApplication from './MyApplication'

Loadable.preloadReady().then(() => {
  hydrate(
    <MyApplication />,
    document.getElementById('root')
  );
});

Заключение

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