Більшість React додатків мають власні розбиті за “бандлами” файли використовуючи такі інструменти, як\nWebpack, Rollup або\nBrowserify.\nБандлінг – це процес імпортування файлів та об’єднання їх в один файл – бандл (модуль).\nЦей бандл може потім бути включений до веб-сторінки для завантаження всього додатку\nодночасно.
\nApp:
\n// app.js\nimport { add } from './math.js';\n\nconsole.log(add(16, 26)); // 42// math.js\nexport function add(a, b) {\n return a + b;\n}Bundle:
\nfunction add(a, b) {\n return a + b;\n}\n\nconsole.log(add(16, 26)); // 42\n\nПримітка:
\nНаприкінці ваші бандли будуть значно відрізнятися від наведених прикладів.
\n
Якщо ви використовуєте Create React App, Next.js, Gatsby чи подібний інструмент, ви матимете налаштування Webpack за замовчуванням для бандлінгу вашого\nдодатку.
\nЯкщо ви не використовуєте нічого з наведеного чи подібного, вам доведеться налаштовувати бандлінг самостійно. Для прикладів ознайомтеся зі\nВстановленням та\nПочатком роботи на офіційній\nдокументації Webpack.
\nРозбиття по бандлам – це прекрасно, але з темпом росту вашого додатку, бандли теж зростають.\nЦе особливо помітно, якщо ви встановили та використовуєте великі сторонні бібліотеки. Вам потрібно\nстежити за кодом, який потрапляє у ваш бандл для того, щоб в один момент не зробити цей бандл настільки\nвеликим, що для завантаження вашого додатку знадобиться чимало часу.
\nЩоб уникнути розростання бандла, варто почати “розділяти” ваш бандл.\nПоділ коду - це функціонал, який підтримується такими бандлерами,\nяк Webpack,\nRollup та Browserify (з\nfactor-bundle), що можуть створювати\nдекілька бандлів та завантажувати їх у разі потреби.
\nРозбиття коду вашого додатку може допомогти поступово завантажити тільки те,\nщо необхідно користувачеві в цей момент. Це може значно покращити продуктивність вашого\nдодатку. Хоча ви не скоротили кількість коду вашого додатку, ви уникнули завантаження\nкоду, який може ніколи не знадобитись користувачеві та скоротили об’єм коду, що необхідний\nна початку завантаження додатку.
\nimport() Найращий спосіб впровадження розбиття коду — через синтаксис\nдинамічних import()
До:
\nimport { add } from './math';\n\nconsole.log(add(16, 26));Після:
\nimport(\"./math\").then(math => {\n console.log(math.add(16, 26));\n});В той момент, коли Webpack стикається з таким синтаксисом, він автоматично починає розбивати код вашого додатку.\nЯкщо ви вже користуєтесь Create React App, це вже налаштовано для вас\nта ви можете одразу почати користуватися цим. Це також підтримується\nу Next.js за замовчуванням.
\nПід час самостійного налаштування Webpack, скоріш за все, у вас з’явиться бажання прочитати\nінструкцію з розбиття коду від Webpack. Конфігурація вашого Webpack повинна мати вигляд, схожий на цей.
\nПід час використання Babel, ви маєте пересвідчитись в тому, що Babel може парсити синтаксис динамічних import, виключаючи можливість його перетворення.\nДля цього вам знадобиться babel-plugin-syntax-dynamic-import.
\nReact.lazy \n\nПримітка:
\n\n
React.lazyта Suspense ще не доступні для рендерингу на стороні сервера. Якщо ви хочете використовувати розбиття коду в додатках відрендерених на сервері, ми рекомендуємо Loadable Components. Він має гарну інструкцію для розбиття на бандли, використовуючи серверний рендеринг.
Функція React.lazy дозволяє вам рендерити динамічний import, як звичайний компонент
До:
\nimport OtherComponent from './OtherComponent';Після:
\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));Цей код автоматично завантажить бандл, що містить OtherComponent коли цей компонент відрендеритися вперше.
React.lazy приймає функцію, яка має викликати динамічний import(). Потім повертається Promise, який при успішному виконанні поверне модуль з default експортом, а у цьому модулі у свою чергу знаходитиметься React-компонент.
Ледачий компонент потім повинен відрендеритися у тілі компонента Suspense. Це дозволить нам показати резервний контент (наприклад, індикатор завантаження), поки ми чекаємо коли ледачий компонент завантажиться.
import React, { Suspense } from 'react';\n\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\n\nfunction MyComponent() {\n return (\n <div>\n <Suspense fallback={<div>Завантаження...</div>}>\n <OtherComponent />\n </Suspense>\n </div>\n );\n}fallback приймає будь-який React елемент, поки чекає повного завантаження компонента. Компонент Suspense можна розмістити де завгодно над “ледачим” компонентом. Ви навіть можете обернути кілька “ледачих” компонентів за допомогою одного Suspense компонента
import React, { Suspense } from 'react';\n\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\nconst AnotherComponent = React.lazy(() => import('./AnotherComponent'));\n\nfunction MyComponent() {\n return (\n <div>\n <Suspense fallback={<div>Завантаження...</div>}>\n <section>\n <OtherComponent />\n <AnotherComponent />\n </section>\n </Suspense>\n </div>\n );\n}Якщо інший модуль не завантажився (наприклад, через виключений інтернет) — це призведе до помилки. Ви можете обробити ці помилки, щоб створити гарний досвід користування і керувати відновленням за допомогою Запобіжників. Після створення запобіжника, його можна використати де завгодно над “ледачим” компонентами для того, щоб показати стан помилки, коли виникає проблема з мережою.
\nimport React, { Suspense } from 'react';\nimport MyErrorBoundary from './MyErrorBoundary';\n\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\nconst AnotherComponent = React.lazy(() => import('./AnotherComponent'));\n\nconst MyComponent = () => (\n <div>\n <MyErrorBoundary>\n <Suspense fallback={<div>Завантаження...</div>}>\n <section>\n <OtherComponent />\n <AnotherComponent />\n </section>\n </Suspense>\n </MyErrorBoundary>\n </div>\n);Рішення стосовно того, де саме вводити розбиття коду може бути доволі складним.\nВи хочете переконатися, що ви обираєте місця, які рівномірно розділять ваші бандли,\nале в жодному разі не порушуватимуть роботу користувача.
\nВдалим місцем для початку може бути ваш файл з маршрутами додатку. Більшість людей\nзвикли до того, що перехід між сторінками займає певний час. Крім того, ви часто\nперезавантажуєте цілу сторінку одразу, тому користувачі навряд чи будуть взаємодіяти\nз іншими елементами на сторінці в цей час.
\nНижче наведено приклад налаштування розбиття коду файла з маршрутами додатку, використовуючи\nбібліотеку React Router за допомогою React.lazy.
import React, { Suspense, lazy } from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n\nconst Home = lazy(() => import('./routes/Home'));\nconst About = lazy(() => import('./routes/About'));\n\nconst App = () => (\n <Router>\n <Suspense fallback={<div>Завантаження...</div>}>\n <Switch>\n <Route exact path=\"/\" component={Home}/>\n <Route path=\"/about\" component={About}/>\n </Switch>\n </Suspense>\n </Router>\n);Наразі React.lazy підтримує тількі експорти за замовчуванням. Якщо модуль, який ви імпортуєте використовує іменовані експорти, можна створити проміжний модуль, який повторно експортуватиме його за замовчуванням. Це гарантує працездатність tree shaking - механізма усунення невикористаного коду.
// ManyComponents.js\nexport const MyComponent = /* ... */;\nexport const MyUnusedComponent = /* ... */;// MyComponent.js\nexport { MyComponent as default } from \"./ManyComponents.js\";// MyApp.js\nimport React, { lazy } from 'react';\nconst MyComponent = lazy(() => import(\"./MyComponent.js\"));