Разделение кода по маршрутам — это техника, когда код приложения делится на отдельные бандлы на уровне каждого маршрута. Такой подход откладывает загрузку кода до момента, когда пользователь переходит на конкретный маршрут, что уменьшает размер начального бандла и улучшает производительность приложения.
Разделение по маршрутам особенно эффективно потому что:
Следующий пример показывает разделение кода по маршрутам с использованием React Router и React.lazy:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
);
lazy(): динамически импортирует компоненты маршрутов только когда они нужныSuspense: показывает fallback-интерфейс (например, сообщение о загрузке) пока загружается бандл маршрутаSwitch: гарантирует, что одновременно отрисовывается только один маршрутКаждый маршрут упаковывается отдельно, позволяя браузеру скачивать только тот код, который нужен для текущей страницы, — это даёт более быструю начальную загрузку и улучшает производительность в целом.
Разделение кода по маршрутам уменьшает размер начального бандла, отсрочивая загрузку кода для маршрутов, на которые пользователь еще не перешел.
Новый — ещё не проверен сообществом
Вы