Большинство React-приложений «собирают» свои файлы такими инструментами, как\nWebpack, Rollup или Browserify.\nСборка (или «бандлинг») — это процесс выявления импортированных файлов и объединения их в один «собранный» файл (часто называемый «bundle» или «бандл»).\nЭтот бандл после подключения на веб-страницу загружает всё приложение за один раз.
\nПриложение:
\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}Бандл:
\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Иначе, вам нужно будет настроить webpack самостоятельно.\nДля этого ознакомьтесь со страницами\nУстановка и\nНачало работы в документации по Webpack.
\nБандлинг это хорошо, но по мере роста вашего приложения, ваш бандл тоже будет расти.\nОсобенно если вы подключаете крупные сторонние библиотеки.\nВам нужно следить за кодом, который вы подключаете, чтобы случайно не сделать приложение настолько большим,\nчто его загрузка займёт слишком много времени.
\nЧтобы предотвратить разрастание бандла, стоит начать «разделять» ваш бандл.\nРазделение кода — это возможность, поддерживаемая такими бандлерами\nкак Webpack, Rollup или Browserify\n(с factor-bundle), которая может создавать\nнесколько бандлов и загружать их по мере необходимости.
\nХоть вы и не уменьшите общий объём кода вашего приложения, но избежите загрузки кода, который\nможет никогда не понадобиться пользователю и уменьшите объём кода, необходимый для начальной загрузки.
\nimport() Лучший способ внедрить разделение кода в приложение — использовать синтаксис динамического импорта: import().
До:
\nimport { add } from './math';\n\nconsole.log(add(16, 26));После:
\nimport(\"./math\").then(math => {\n console.log(math.add(16, 26));\n});Когда Webpack сталкивается с таким синтаксисом, он автоматически начинает разделять код вашего приложения. Если вы используете Create React App, то всё уже настроено и\nвы можете сразу начать использовать синтаксис динамического импорта. Он также поддерживается «из коробки» в Next.js.
\nЕсли вы настраиваете Webpack самостоятельно, то, вероятно, захотите прочитать руководство Webpack по разделению кода.\nФайл конфигурации Webpack должен выглядеть примерно так.
\nЕсли вы используете Babel, вам необходимо убедиться, что он понимает синтаксис динамического импорта.\nДля этого вам необходимо установить плагин @babel/plugin-syntax-dynamic-import.
\nReact.lazy \n\nПримечание:
\nВозможности
\nReact.lazyи задержки (suspense) пока недоступны для рендеринга на стороне сервера. Если вам нужно разделение кода в серверном приложении, мы рекомендуем Loadable Components. У них есть хорошее руководство по разделению бандла с серверным рендерингом.
Функция React.lazy позволяет рендерить динамический импорт как обычный компонент.
До:
\nimport OtherComponent from './OtherComponent';После:
\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));Она автоматически загрузит бандл, содержащий OtherComponent, когда этот компонент будет впервые отрендерен.
React.lazy принимает функцию, которая должна вызвать динамический import(). Результатом возвращённого Promise является модуль, который экспортирует по умолчанию React-компонент (export default).
Компонент с ленивой загрузкой должен рендериться внутри компонента 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Вот пример того, как организовать разделение кода на основе маршрутов с помощью React.lazy и таких библиотек как React Router.
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\"));