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

0 0

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

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

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

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

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

React JS. Основы

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

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

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

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

Компонент 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> ); }

12345678910111213141516171819202122232425262728293031const 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> ); }

12345678910111213141516171819202122function 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>  );}

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

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

Из приведенного выше изображения, файл размером 405,1 КБ является компонентом панели инстрементов, а другие файлы предназначены для заголовка, боковой панели, других компонентов и CSS.

Я разместил приложение на Netlify, чтобы проверить производительность. Поскольку, когда мы тестируем приложение локально, мы не можем увидеть разницу. Когда я тестировал размещенное приложение с помощью GTmetrix, компонент панели инструментов загружался за 2,9 секунды.

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

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

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

123456789101112131415161718192021222324252627282930313233343536373839const 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>  );}

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

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

Теперь давайте снова протестируем приложение с GTmetrix с указанными выше изменениями. Посмотрите производительность приложения на изображении ниже.

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

Как видите, теперь наш компонент панели инструментов загружается за 1 секунду. Поскольку код вкладки «Продажи» загружается отдельно. Мы сократили время начальной загрузки почти на 2 секунды. Давайте посмотрим на изображения ниже:

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

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

Как видите, это огромное улучшение начальной загрузки приложения. Теперь мы сократили время начальной загрузки приложения React на 70% с помощью нескольких настроек, эффективно используя разделение кода в компоненте панели инструментов.

Заключение

Оптимизированное структурирование компонентов и эффективное использование API React повышает производительность крупномасштабных приложений. Спасибо за чтение.

Автор: Nilanth

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

Оставьте ответ