От автора: при создании масштабных приложений с помощью React основной проблемой, с которой мы сталкиваемся, является их производительность. Когда приложение становится все больше и больше, производительность может ухудшиться. В частности, это влияет на время начальной загрузки приложения.
Первоначальная загрузка приложения должна выполняться быстро, при этом пользователю не должен показываться пустой экран в течение нескольких секунд. Если загрузка занимает больше времени — это произведет плохое впечатление на пользователя.
Основная причина проблемы — добавление слишком большого количества компонентов в один файл пакета, поэтому загрузка такого файла пакета может занять больше времени. Чтобы избежать подобного рода проблем, нам необходимо оптимизировать структуру наших компонентов. Для решения этой проблемы есть решение — разделение кода и ленивая загрузка. Это позволяет разбивать файлы пакета на меньший размер.
Лучшим вариантом разделения кода являются маршруты. Разделение кода на основе маршрутов решает часть проблем. Но большинство приложений используют только 50% преимуществ разделения кода.
Правильно ли мы структурируем компоненты при использовании разделения кода? Мы можем увидеть, почему и как это исправить, используя несколько примеров. Для этого мы собираемся использовать образец приложения React с некоторыми компонентами пользовательского интерфейса.

Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоНа скриншоте ниже мы видим компонент панели управления, который имеет несколько вкладок. Каждая вкладка состоит из нескольких компонентов.
Компонент Dashboard использует разбиение кода на основе маршрута, как показано ниже.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
const Dashboard = lazy(() => import('components/Dashboard')); const Settings = lazy(() => import('components/Settings')); const Configurations = lazy(() => import('components/Configurations')); function App() { return ( <Router> <Layout> <SideBar/> <Layout> <AppHeader/> <Content style={{padding: '20px'}}> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route path="/dashboard"> <Dashboard/> </Route> <Route path="/settings"> <Settings/> </Route> <Route path="/configuration"> <Configurations/> </Route> </Switch> </Suspense> </Content> </Layout> </Layout> </Router> ); } |
Компонент Dashboard содержит некоторые подкомпоненты, такие как Sales, Profit, Chart, Tiles и Trends, как в приведенном ниже коде.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function Dashboard() { return ( <Tabs defaultActiveKey="1"> <TabPane tab="Sales" key="1"> <Sales/> </TabPane> <TabPane tab="Profit" key="2"> <Profit/> </TabPane> <TabPane tab="Chart" key="3"> <Chart/> </TabPane> <TabPane tab="Tiles" key="4"> <Tiles/> </TabPane> <TabPane tab="Trends" key="5"> <Trends/> </TabPane> </Tabs> ); } |
Мы разделили код на маршруты. Поэтому, готовое приложение содержит отдельный файл сборки для каждого маршрута, как показано ниже.
Из приведенного выше изображения, файл размером 405,1 КБ является компонентом панели инстрементов, а другие файлы предназначены для заголовка, боковой панели, других компонентов и CSS.
Я разместил приложение на Netlify, чтобы проверить производительность. Поскольку, когда мы тестируем приложение локально, мы не можем увидеть разницу. Когда я тестировал размещенное приложение с помощью GTmetrix, компонент панели инструментов загружался за 2,9 секунды.

Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоКомпонент панели инструментов является начальной страницей для нашего приложения, поэтому, когда мы нажимаем на URL-адрес приложения, будет загружен файл 405,1 КБ вместе с заголовком и боковой панелью.
Первоначально пользователь будет просматривать только вкладку «Продажи», но в нашем примере, компонент панели инструментов содержит несколько вкладок. Браузер также загружает код других вкладок, поэтому он задерживает отрисовку для пользователя. Чтобы уменьшить время начальной загрузки, нам нужно внести некоторые изменения в компонент панели инструментов, как показано ниже.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
const Sales = lazy(() => import('components/Sales')); const Profit = lazy(() => import('components/Profit')); const Chart = lazy(() => import('components/Chart')); const Tiles = lazy(() => import('components/Tiles')); const Trends = lazy(() => import('components/Trends')); const { TabPane } = Tabs; function Dashboard() { return ( <Tabs defaultActiveKey="1"> <TabPane tab="Sales" key="1"> <Suspense fallback={<div>Loading...</div>}> <Sales/> </Suspense> </TabPane> <TabPane tab="Profit" key="2"> <Suspense fallback={<div>Loading...</div>}> <Profit/> </Suspense> </TabPane> <TabPane tab="Chart" key="3"> <Suspense fallback={<div>Loading...</div>}> <Chart/> </Suspense> </TabPane> <TabPane tab="Tiles" key="4"> <Suspense fallback={<div>Loading...</div>}> <Tiles/> </Suspense> </TabPane> <TabPane tab="Trends" key="5"> <Suspense fallback={<div>Loading...</div>}> <Trends/> </Suspense> </TabPane> </Tabs> ); } |
Здесь я импортировал каждый компонент вкладки с ленивой загрузкой и обернул компонент с ожиданием. Я не вносил никаких изменений в разделение кода на уровне маршрута. Когда мы создаем приложение, добавляются некоторые дополнительные файлы, поскольку мы лениво загружаем каждую вкладку в компоненте панели инструментов. На изображении ниже показано разделение файлов сборки.
Теперь давайте снова протестируем приложение с GTmetrix с указанными выше изменениями. Посмотрите производительность приложения на изображении ниже.
Как видите, теперь наш компонент панели инструментов загружается за 1 секунду. Поскольку код вкладки «Продажи» загружается отдельно. Мы сократили время начальной загрузки почти на 2 секунды. Давайте посмотрим на изображения ниже:
Разделение кода на основе маршрута
Разделение кода на основе маршрутов и компонентов
Как видите, это огромное улучшение начальной загрузки приложения. Теперь мы сократили время начальной загрузки приложения React на 70% с помощью нескольких настроек, эффективно используя разделение кода в компоненте панели инструментов.
Заключение
Оптимизированное структурирование компонентов и эффективное использование API React повышает производительность крупномасштабных приложений. Спасибо за чтение.
Автор: Nilanth
Источник: javascript.plainenglish.io
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен

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