От автора: при создании масштабных приложений с помощью React основной проблемой, с которой мы сталкиваемся, является их производительность. Когда приложение становится все больше и больше, производительность может ухудшиться. В частности, это влияет на время начальной загрузки приложения.
Первоначальная загрузка приложения должна выполняться быстро, при этом пользователю не должен показываться пустой экран в течение нескольких секунд. Если загрузка занимает больше времени — это произведет плохое впечатление на пользователя.
Основная причина проблемы — добавление слишком большого количества компонентов в один файл пакета, поэтому загрузка такого файла пакета может занять больше времени. Чтобы избежать подобного рода проблем, нам необходимо оптимизировать структуру наших компонентов. Для решения этой проблемы есть решение — разделение кода и ленивая загрузка. Это позволяет разбивать файлы пакета на меньший размер.
Лучшим вариантом разделения кода являются маршруты. Разделение кода на основе маршрутов решает часть проблем. Но большинство приложений используют только 50% преимуществ разделения кода.
Правильно ли мы структурируем компоненты при использовании разделения кода? Мы можем увидеть, почему и как это исправить, используя несколько примеров. Для этого мы собираемся использовать образец приложения React с некоторыми компонентами пользовательского интерфейса.
На скриншоте ниже мы видим компонент панели управления, который имеет несколько вкладок. Каждая вкладка состоит из нескольких компонентов.
Компонент Dashboard использует разбиение кода на основе маршрута, как показано ниже.
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, как в приведенном ниже коде.
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 КБ вместе с заголовком и боковой панелью.
Первоначально пользователь будет просматривать только вкладку «Продажи», но в нашем примере, компонент панели инструментов содержит несколько вкладок. Браузер также загружает код других вкладок, поэтому он задерживает отрисовку для пользователя. Чтобы уменьшить время начальной загрузки, нам нужно внести некоторые изменения в компонент панели инструментов, как показано ниже.
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, Яндекс.Дзен