Вашето приложение React твърде бавно ли е или отнема твърде много време за зареждане? Ако е така, може да искате да използвате техника, известна като разделяне на код. Тази техника е много ефективна за подобряване на скоростта на зареждане и производителността на React приложенията. Но какво е разделяне на код? И как се прави?

Какво е разделяне на код?

Типично приложение на React се състои от десетки компоненти (и код). Но не е необходимо да зареждате повечето от тези компоненти, когато ги зареждате за първи път. Разделянето на кода включва разделяне на различните части на вашето приложение и зареждането им само когато е необходимо. Това е много по-ефективно от зареждането на цялото приложение наведнъж.

Помислете за React приложение, което има три страници: началната страница, страницата за информация и страницата с продуктите. Когато сте на началната страница, няма смисъл да зареждате страницата за информация или страницата с продукти. Защото всъщност все още не сте на тези страници. Идеята на разделянето на кода е да се уверите, че зареждате кода само когато е необходим.

Отворете уеб страница в уеб браузъра си и след това отворете DevTools (можете да щракнете върху F12 на клавиатурата си, за да я отворите в Google Chrome). След това отидете на раздела Източник. Там ще намерите целия код, който е изтеглен, докато навигирате до страницата. Без разделяне на код, браузърът изтегля всички файлове във вашия проект при първоначалното зареждане на страницата. Това може да забави уебсайта ви, ако съдържа много файлове.

Разделянето на код става особено полезно, когато вашият проект започне да става все по-голям и по-голям. Това е така, защото изтеглянето на всички файлове на приложението наведнъж може да отнеме много време. Така че разделянето на това ще бъде доста полезно.

Най-добрата част от разделянето на код е, че можете да забавите зареждането на компоненти, както и на функции. Нашите въвеждащо ръководство за ReactJS обяснява компонентите и функциите в дълбочина, в случай че имате нужда от опресняване.

Функции за разделяне на код: Използване на динамично импортиране

Помислете за следната ситуация. Искате началната ви страница да има бутон. Когато щракнете върху бутона, искате да предупредите сумата от 2 и 2 (което е 4). Така че създавате a Home.js компонент и дефинирайте изгледа на вашата начална страница.

В този случай имате две възможности. Първо, можете да импортирате кода за добавяне на числата в горната част на Home.js файл. Но тук е проблемът. Ако импортирате функцията в горната част на файла, тогава кодът ще се зареди дори когато не сте щракнали върху бутона. По-добър подход ще бъде да заредите сума () функционира само когато щракнете върху бутона.

За да постигнете това, ще трябва да извършите динамично импортиране. Това означава, че ще импортирате сума () функция вградена в елемента бутон. Ето кода за същото:

износпо подразбиранефункцияУ дома() { 
връщане ( 
"У дома"> 
Начална страница</h1>
 {
импортиране("../sum.js").тогава((модул) => {
 тревога(модул.sum(2, 2))
 })
 }}
 >
 Сумирайте двете числа
 </button> 
 </div> 
 ); 
}

Сега браузърът ще изтегли само sum.js модул, когато щракнете върху бутона. Това подобрява времето за зареждане на началната страница.

Компоненти за разделяне на код: Използване на React.lazy и Suspense

Можете да разделяте компоненти в React с помощта на мързелив() функция. Най-доброто място за извършване на разделяне на код ще бъде във вашия рутер. Защото това е мястото, където картографирате компоненти към маршрути във вашето приложение. Можете да прочетете нашето ръководство на как да създадете приложение с една страница с React Router ако имате нужда от освежаване.

Да предположим, че вашето приложение има a У дома, относно, и Продукти компонент. Когато сте на У дома компонент, няма смисъл да зареждате относно компонент или Продукти компонент. Така че трябва да ги разделите от У дома маршрут. Следният код демонстрира как да постигнете това:

Първо, трябва да импортирате необходимите функции и компоненти от реагират и реагират-рутер-дом модули:

импортиране { Маршрути, маршрут, изход, връзка } от"react-router-dom";
импортиране { lazy, Suspense } от"реагира";

След това трябва да импортирате компонентите динамично, като използвате мързелив() функция:

конст Дом = мързелив(() =>импортиране("./components/Home"));
конст Относно = мързелив(() =>импортиране("./components/About"));
конст Продукти = мързелив(() =>импортиране("./components/Products"));

След това настройте оформлението (меню за навигация). Използвай компонент за изобразяване на компонента, който съответства на текущия маршрут (У дома, относно, или Продукти компонент):

функцияNavWrapper() {
връщане (
 <>

Виждате, че увиваме компонентите вътре. Това казва на React, че всичко вътре има потенциал да се зарежда лениво, което означава, че може да не е наличен веднага. Поради тази причина, Съспенс компонент има a резервен вариант Имот. В нашия случай стойността е обикновен текст, който гласи „Зареждане...“. Така че, докато всяка от страниците се изтегля, на екрана ще пише зареждане.

Накрая настройте маршрута:

износпо подразбиранефункцияПриложение() {
връщане (

"/" елемент={}>
"/" елемент={} />
"/продукти" елемент={} />
"/относно" елемент={} />
 </Route>
 </Routes>
 );
}

Сега, когато посетите началната страница, браузърът зарежда само Home.js файл. По същия начин, когато щракнете върху относно връзка в менюто за навигация, за да посетите страницата Информация, браузърът зарежда само About.js файл. Това важи и за страницата с продукти.

Разделяне на условен код

Често може да имате съдържание на страницата си, което е приложимо само за определени потребители. Например на началната си страница можете да имате раздел с администраторски данни, който е само за администраторски потребители. Това може да е администраторско табло, което се показва за администраторски потребители, но не и за обикновени потребители.

В този случай не бихте искали да показвате всички тези данни всеки път. В този случай можете да използвате техниката за разделяне на код, за да сте сигурни, че показвате тази информация само ако този човек е администратор.

Ето как ще изглежда този код:

импортиране { lazy, Suspense } от"реагира";
конст AdminData = мързелив(() =>импортиране("./AdminData"));
износпо подразбиранефункцияУ дома() { 
конст [isAdmin, setIsAdmin] = useState(невярно)
връщане ( 

"У дома"> 
Начална страница</h1>
 setIsAdmin(предишна => !пред.)}>
 Превключване на администратора
 </button> 

Зарежда се...</h1>}>
 {isAdmin? <AdminData />: <h2> Не Админът h2>} 
 </Suspense>
 </div> 
 ); 
}

Сега, когато щракнете върху бутона за превключване, е администратор ще бъде настроено на вярно. В резултат на това приложението ще покаже който се зарежда лениво. Но ако не сте администраторски потребител, приложението никога няма да се изтегли AdminData.js защото няма да има нужда от него.

Условното разделяне на кода използва същата концепция като условно изобразяване в React.

Разширени концепции за разделяне на код

Една усъвършенствана техника, която можете да активирате, когато разделяте код, са преходите. The useTransition() hook ви позволява да правите неспешни актуализации, които няма да променят потребителския ви интерфейс, докато не приключат с актуализацията.

Първо импортирате куката:

импортиране {useTransition} от"реагира"

След това извиквате куката, която се връща isPending и startTransition:

конст [isPending, startTransition] = useTransition()

Накрая обвийте кода за актуализиране на вашето състояние вътре startTransition():

startTransition(() => {
 setIsAdmin((предишна) => !пред.)
})

Сега вашият действителен потребителски интерфейс няма да показва резервната стойност (текста за зареждане), докато браузърът не завърши прехода. Това означава, че ще изчака браузърът да изтегли всички администраторски данни, преди да се опита да покаже каквито и да било данни.

Други начини за оптимизиране на производителността на React

Тази статия обхваща разделянето на код като метод за подобряване на производителността на вашите React приложения. Но има и няколко други метода, които могат да ви дадат необходимите знания за създаване на надеждни приложения.