Как сократить время загрузки приложения React на 70%

Первоначальная загрузка приложения должна выполняться быстро, при этом пользователю не должен показываться пустой экран в течение нескольких секунд. Если загрузка занимает больше времени — это произведет плохое впечатление на пользователя.

Основная причина проблемы — добавление слишком большого количества компонентов в один файл пакета, поэтому загрузка такого файла пакета может занять больше времени. Чтобы избежать подобного рода проблем, нам необходимо оптимизировать структуру наших компонентов. Для решения этой проблемы есть решение — разделение кода и ленивая загрузка. Это позволяет разбивать файлы пакета на меньший размер.

Лучшим вариантом разделения кода являются маршруты. Разделение кода на основе маршрутов решает часть проблем. Но большинство приложений используют только 50% преимуществ разделения кода.

Правильно ли мы структурируем компоненты при использовании разделения кода? Мы можем увидеть, почему и как это исправить, используя несколько примеров. Для этого мы собираемся использовать образец приложения React с некоторыми компонентами пользовательского интерфейса.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

На скриншоте ниже мы видим компонент панели управления, который имеет несколько вкладок. Каждая вкладка состоит из нескольких компонентов.

Компонент Dashboard использует разбиение кода на основе маршрута, как показано ниже.

JavaScript 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> ); }

12345678910111213141516171819202122232425262728293031

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, как в приведенном ниже коде.

JavaScript 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> ); }

12345678910111213141516171819202122

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 секунды.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Компонент панели инструментов является начальной страницей для нашего приложения, поэтому, когда мы нажимаем на URL-адрес приложения, будет загружен файл 405,1 КБ вместе с заголовком и боковой панелью.

Первоначально пользователь будет просматривать только вкладку «Продажи», но в нашем примере, компонент панели инструментов содержит несколько вкладок. Браузер также загружает код других вкладок, поэтому он задерживает отрисовку для пользователя. Чтобы уменьшить время начальной загрузки, нам нужно внести некоторые изменения в компонент панели инструментов, как показано ниже.

JavaScript 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> ); }

123456789101112131415161718192021222324252627282930313233343536373839

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

Источник: webformyself.com