Как сократить время загрузки приложения React на 70%
5 репозиториев GitHub для обучения разработчиков
09.02.2022
Удивительные вещи, связанные с React Hooks 😍
16.02.2022Мы создаем масштабные приложения с использованием React. При создании этих проектов основной проблемой, с которой сталкиваемся, является производительность приложения. Когда приложение становится все больше и больше, производительность может ухудшиться. В частности, это повлияет на начальное время загрузки приложения. Первоначальная загрузка приложения должна быть быстрой, без показа пользователю пустого экрана в течение нескольких секунд. Поскольку увеличение времени загрузки создаст негативное впечатление у пользователя.
Основной причиной этой проблемы является добавление слишком большого количества компонентов в один файл пакета, поэтому загрузка этого файла пакета может занять больше времени. Чтобы избежать подобных проблем, нам нужно оптимизировать структуру наших компонентов. Чтобы решить эту проблему, у самого 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 32 33 |
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 23 24 |
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 40 41 |
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 повысят производительность крупномасштабных приложений.
Пробуйте и ускоряйте свою работу!
Источник статьи: http://dev.to/
