Да ли је ваша Реацт апликација преспора или се предуго учитава? Ако јесте, можда бисте желели да користите технику познату као подела кода. Ова техника је веома ефикасна у побољшању брзине учитавања и перформанси Реацт апликација. Али шта је дељење кода? И како се то ради?

Шта је дељење кода?

Типична Реацт апликација се састоји од десетина компоненти (и кода). Али не морате да учитавате већину ових компоненти када их учитавате први пут. Подела кода подразумева раздвајање различитих делова ваше апликације и њихово учитавање само када је то потребно. Ово је далеко ефикасније од учитавања целе апликације одједном.

Размислите о Реацт апликацији која има три странице: почетну страницу, страницу са информацијама и страницу производа. Када сте на почетној страници, нема смисла учитавати страницу са информацијама или страницу са производима. Зато што још увек нисте на тим страницама. Идеја раздвајања кода је да осигурате да учитавате код само када је то потребно.

Отворите веб страницу у свом веб прегледачу, а затим отворите ДевТоолс (можете да кликнете на Ф12 на тастатури да бисте је отворили у Гоогле Цхроме-у). Затим идите на картицу Извор. Тамо ћете пронаћи сав код који је преузет док се крећете до странице. Без поделе кода, прегледач преузима све датотеке у вашем пројекту при почетном учитавању странице. Ово може успорити вашу веб локацију ако садржи много датотека.

Подела кода постаје посебно корисна како ваш пројекат почиње да постаје све већи и већи. То је зато што преузимање целих датотека апликације одједном може потрајати веома дуго. Дакле, раздвајање ће бити веома корисно.

Најбољи део код раздвајања је то што можете одложити учитавање компоненти као и функција. Наше уводни водич за РеацтЈС детаљно објашњава компоненте и функције у случају да вам треба освежење.

Функције раздвајања кода: Коришћење динамичког увоза

Размотрите следећу ситуацију. Желите да ваша почетна страница има дугме. Када кликнете на дугме, желите да упозорите збир 2 и 2 (што је 4). Дакле, стварате а Хоме.јс компоненту и дефинишете приказ ваше почетне странице.

У овом случају, имате две опције. Прво, можете увести код за додавање бројева на врху Хоме.јс фајл. Али овде је проблем. Ако бисте увезли функцију на врху датотеке, код ће се учитати чак и када нисте кликнули на дугме. Бољи приступ ће бити учитавање сума() функционише само када кликнете на дугме.

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

извозУобичајенофункцијаКућа() { 
повратак ( 
"Кућа"> 
ХомеПаге</h1>
 {
увоз("../сум.јс").онда((модул) => {
 упозорење (модул.сум(2, 2))
 })
 }}
 >
 Зброј оба броја
 </button> 
 </div> 
 ); 
}

Сада ће прегледач преузети само сум.јс модула када кликнете на дугме. Ово побољшава време учитавања почетне странице.

Компоненте за раздвајање кода: Коришћење Реацт.лази и Суспенсе

Можете поделити компоненте у Реацт-у користећи лењ() функција. Најбоље место за дељење кода било би унутар вашег рутера. Зато што овде мапирате компоненте у руте у вашој апликацији. Можете прочитати наш водич на како да направите апликацију на једној страници са Реацт Роутер-ом ако вам треба освежење.

Претпоставимо да ваша апликација има а Кућа, О томе, и Производи саставни део. Када сте код Кућа компоненту, нема смисла учитавати О томе компонента или Производи саставни део. Дакле, морате их одвојити од Кућа рута. Следећи код показује како то постићи:

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

увоз { Роутес, Роуте, Оутлет, Линк } из"реаговати-рутер-дом";
увоз { лењ, неизвесност } из"реаговати";

Затим морате динамички да увезете компоненте користећи лењ() функција:

конст Дом = лењ(() =>увоз("./цомпонентс/Хоме"));
конст О = лењ(() =>увоз("./цомпонентс/Абоут"));
конст Производи = лењи(() =>увоз("./цомпонентс/Продуцтс"));

Затим подесите изглед (мени за навигацију). Користити компоненту да прикаже компоненту која одговара тренутној рути (Кућа, О томе, или Производи саставни део):

функцијаНавВраппер() {
повратак (
 <>

Можете видети да смо умотали компоненте унутра. Ово говори Реацту да је све унутра има потенцијал да се лењо учитава, што значи да можда неће бити доступан одмах. Из тог разлога, Неизвесност компонента има а повући се имовина. У нашем случају, вредност је једноставан текст који каже „Учитавање...“. Дакле, док се свака од страница преузима, на екрану ће се рећи учитавање.

Коначно, поставите руту:

извозУобичајенофункцијаАпликација() {
повратак (

"/" елемент={}>
"/" елемент={} />
"/производи" елемент={} />
"/О томе" елемент={} />
 </Route>
 </Routes>
 );
}

Сада када посетите почетну страницу, претраживач учитава само Хоме.јс фајл. На исти начин, када кликнете на О томе везу у менију за навигацију да бисте посетили страницу о страници, претраживач учитава само Абоут.јс фајл. Исто важи и за страницу Производи.

Условно раздвајање кода

Често на својој страници можете имати садржај који је применљив само на одређене кориснике. На пример, на својој почетној страници можете имати одељак са подацима администратора који је ексклузиван за администраторе. Ово може бити администраторска контролна табла која се приказује за администраторе, али не и за нормалне кориснике.

У овом случају, не бисте желели да приказујете све те податке сваки пут. У овом случају, можете користити технику раздвајања кода да бисте били сигурни да приказујете те информације само ако је ова особа администратор.

Ево како би тај код изгледао:

увоз { лењ, неизвесност } из"реаговати";
конст АдминДата = лењи(() =>увоз("./АдминДата"));
извозУобичајенофункцијаКућа() { 
конст [исАдмин, сетИсАдмин] = усеСтате(лажно)
повратак ( 

"Кућа"> 
ХомеПаге</h1>
 сетИсАдмин(прев => !прев)}>
 Тоггле Админ
 </button> 

Учитавање...</h1>}>
 {исАдмин? <АдминДата />: <х2> Не Админ х2>} 
 </Suspense>
 </div> 
 ); 
}

Сада, када кликнете на дугме за пребацивање, исАдмин биће постављено на истина. Као резултат, апликација ће приказати који се лењо учитава. Али ако нисте администраторски корисник, апликација се никада неће преузети АдминДата.јс јер му неће требати.

Условно раздвајање кода користи исти концепт као условно приказивање у Реацт-у.

Напредни концепти раздвајања кода

Једна напредна техника коју можете да омогућите када делите код су прелази. Тхе усеТранситион() хоок вам омогућава да извршите ажурирања која нису хитна и која неће променити ваш кориснички интерфејс док се ажурирање не заврши.

Прво увозите куку:

увоз {усеТранситион} из"реаговати"

Затим позивате куку, која се враћа је у току и стартТранситион:

конст [исПендинг, стартТранситион] = усеТранситион()

На крају, умотајте код за ажурирање вашег стања унутра стартТранситион():

стартТранситион(() => {
 сетИсАдмин((прев) => !прев)
})

Сада ваш стварни кориснички интерфејс неће приказати резервну вредност (текст за учитавање) док прегледач не заврши прелаз. То значи да ће сачекати да прегледач преузме све податке администратора пре него што покуша да прикаже било какве податке.

Други начини за оптимизацију перформанси Реацт-а

Овај чланак је покрио цепање кода као метод за побољшање перформанси ваших Реацт апликација. Али постоји и неколико других метода које вам могу дати потребно знање за креирање робусних апликација.