Како се користе Реацт.лази и Суспенсе за лење учитавање компонената

Реацт 16.6 поделио је поделу кода на нови ниво. Сада можете учитати компоненте када је то заиста потребно без инсталирања додатних библиотека.

Шта су подела кода и лење учитавање?

Вебпацк дефинише подјелу кода као:

„Техника поделе кода у разне снопове који се затим могу учитати на захтев или паралелно“. [Извор]

Други начин да кажемо: „утовар на захтев или паралелно“ је лење утовар .

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

Зашто бисмо користили поделу кода и лење учитавање?

Понекад морамо да уведемо велики део кода да покријемо неке функције. Овај код може увозити независну зависност или га сами писати. Овај код тада утиче на величину главног снопа.

Преузимање неколико МБ је комад колача за данашњу брзину интернета. Још увек морамо да мислимо на кориснике са спором Интернет везом или коришћењем мобилних података.

Како је то урађено пре Реацт-а 16.6?

Вероватно најпопуларнија библиотека за лење учитавање Реацт компоненти је react-loadable.

Важно је да респонсејс.орг и даље препоручује react-loadableда ли се ваша апликација приказује на серверу. [Извор]

react-loadableје заправо прилично сличан новом приступу Реацт-а. Показаћу ово у следећем демо.

Да ли је потребно нешто за подешавање?

Да видимо шта има на то реакција.орг:

„Ако користите Цреате Реацт Апп, Нект.јс, Гатсби или сличну алатку, од вас ће бити потребно да поставите Вебпацк да бисте групирали своју апликацију. Ако нисте, мораћете да подесите груписање сами . На пример, погледајте упутства за инсталацију и почетак рада на Вебпацк документима. “

- респонсејс.орг

Ок, потребан је Вебпацк , који обрађује динамички увоз снопова.

Следећа демонстрација је генерисана помоћу Create React App.И у том случају је Вебпацк већ конфигурисан и спремни смо за рад.

ДЕМО

За овај демо ћемо користити react-pdf. react-pdfје сјајна библиотека која се користи за креирање ПДФ датотека у прегледачу, мобилном уређају и серверу. Могли бисмо да генеришемо ПДФ на серверу, али ако бисмо то радије радили на клијентској страни, то долази с трошком: величина пакета.

Користим проширење Увоз трошкова за Висуал Студио Цоде да бих видео величине коришћених библиотека.

Рецимо да је наш захтев генерирање ПДФ датотеке када корисник кликне на дугме.

Ово је једноставан образац са само једним случајем употребе. Покушајте да замислите огромну веб апликацију у којој је ово мали део могућности. Можда корисници ову функцију не користе често.

Ставимо се у ту ситуацију. Генерирање ПДФ-а не користи се често и нема смисла учитавати читав код за сваки захтев странице.

Покушаћу да покажем како можемо да развијемо решење са лењим оптерећењем и без њега.

Нестрпљива ВС лења витрина за утовар

У оба случаја користићемо једну компоненту која увози зависности react-pdfи приказује једноставан ПДФ документ.

Овде се ништа спектакуларно не догађа. Увозимо PDFViewer, Document, Page, Text, Viewод react-pdf. Све се користе у renderметоди PDFPreviewкомпоненте.

PDFPreviewприма само један propпозвани title. Као што назив имплицира, користи се као наслов у новоствореној ПДФ датотеци.

пдфСтилес.јс изгледа овако:

Жељно учитавање

Прво да видимо како би могла да изгледа родитељска компонента без лењег учитавања:

који у прегледачу приказује следећи приказ:

Прођимо заједно кроз код:

На линији 2 увозимо PDFPreviewкомпоненту.

У реду 6 иницијализујемо стање са подразумеваним вредностима. nameје поље које се користи као наслов у ПДФ датотеци, док је поље PDFPreviewлогичко које приказује или скрива PDFPreview.

Сада, пређимо на renderметод и проверимо шта ће се приказати.

На линијама 19 и 25 приказујемо улаз и дугме. Када корисник унесе у улаз, nameстање се мења.

Тада када корисник кликне на „Генериши ПДФ“, showPDFPreviewпоставља се на true. Компонента поново приказује и приказује PDFPreviewкомпоненту.

Иако користимо PDFPreviewсамо клик корисника, са њим је повезан сав код:

Ово је развојно окружење. У производњи би величине биле знатно мање. Ипак, не делимо код оптимално.

Лази лоадинг

Направили смо само мале промене и прођимо кроз њих.

Ред 2 се замењује са:

const LazyPDFDocument = React.lazy(() => import("./PDFPreview"));

Да видимо шта Реацт доцс кажу о Реацт.лази:

React.lazy узима функцију која мора да позове динамику import(). Ово мора вратити а Promiseкоји се разрешава на модул са defaultизвозом који садржи компоненту Реацт.

- респонсејс.орг

У линији 27 користимо Suspense, која мора бити родитељ лење учитане компоненте. Када showPDFPreviewје постављено на Тачно, LazyPDFDocumentпочиње да се учитава.

Док се подређена компонента не разреши, Suspenseприказује све што је предвиђено за fallbackподупирање.

Крајњи резултат изгледа овако:

Видимо да су тежине 0.цхунк.јс знатно мање него раније, а 4.цхунк.јс и 3.цхунк.јс се учитавају притиском на дугме.

Закључак

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

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

Ако је одговор да, онда React.Lazyи Suspenseстварно нам помогнете у вези са задатком.

Хвала вам за читање! Поделите га са свима којима би то могло бити корисно и оставите повратне информације.