Importet e modulit dinamik në JavaScript: Si dhe pse

Mos i ngarkoni ato skedarë të mëdhenj të panevojshëm në ngarkesën e parë

Importet e modulit dinamik luajnë një rol shumë të rëndësishëm nëse dëshironi që kodi juaj të jetë i shpejtë dhe më efikas. Shumicën e kohës, nuk keni nevojë të ngarkoni të gjithë ata skedarë të rëndë dhe të rëndë me një lëvizje. Do të jetë shumë e dobishme nëse mund t'i importojmë disi ato skedarë sa herë që kërkohen.

Importet e modulit dinamik mund të jenë shpëtimtari këtu. Në këtë artikull, ne do të diskutojmë se çfarë janë importet dinamike të modulit dhe disa raste përdorimi ku ato mund të jenë super të dobishme.

Për të filluar, le t'i hedhim një sy këtyre dy skedarëve.

Siç mund ta shohim, ne kemi këto dy skedarë të thjeshtë js: user.js, dhe script.js.

user.js ka një klasë të quajtur User e cila pranon dy veti, emrin first dhe emrin last, dhe një funksion të thjeshtë printUser i cili thjesht do të printojë emrin e plotë në tastierë.

script.jska një deklaratë standarde import që importon User dhe printUser nga user.js. Pas kësaj, ne krijuam një përdorues të ri me emrin first si Gourav dhe last emrin si Kajal, dhe më pas thirrëm funksionin printuser për të printuar emrin e përdoruesit në tastierë. Mjaft e drejtpërdrejtë.

Kjo është mënyra se si ne përdorim deklaratat e importit në kodin tonë shumicën e kohës. Tani, mënyra se si funksionon aktualisht ky kod është se shfletuesi ynë do të shkarkojë script.js së pari, dhe menjëherë pas kësaj user.jsdo të shkarkohet sapo të ngarkohet faqja. Edhe nëse jeni duke përdorur një grup si Webpack, këta dy skedarë do të kombinohen së bashku dhe ai skedar i ri do të shkarkohet në ngarkimin e faqes. Pavarësisht se çfarë ndodh, i gjithë kodi user.jsdhe i gjithë script.js do të shkarkohen sapo të ngarkohet faqja.

Tani, duke përdorur importet dinamike të modulit, ajo që mund të bëjmë është që të shkarkojmë disa kode të aplikacionit tonë më vonë ose të mos shkarkojmë fare kod.

Tani, le të shohim se si mund ta konvertojmë atë në importimin e modulit dinamik. Në fakt është mjaft e drejtpërdrejtë.

Këtu, në vend të përdorimit të deklaratës import, ne përdorëm funksionin import() i cili pranon një argument, d.m.th., shtegun e skedarit dhe kthen një promise. Pra, ne përdorëm then dhe strukturuam çdo gjë që kthehej nga user.js dhe thjesht e zhvendosëm kodin tonë brenda atij blloku. Tani, user.js do të ngarkohet sa herë që do të thërrasim atë funksion në vend të ngarkesës fillestare.

Për ta testuar këtë, e vendosa funksionin e importit brenda një afati kohor në mënyrë që pas ngarkimit të faqes, të presë për pesë sekonda dhe më pas user.js do të ngarkohet. Edhe nëse keni një bundler, user.js nuk do të kombinohet me script.js dhe në ngarkimin fillestar të faqes vetëm script.js do të ngarkohet dhe user.js do të ngarkohet pas pesë sekondash.

Tani, kjo është ideja bazë dhe kuptimi i importeve dinamike të moduleve. Duke përdorur këtë, aplikacioni juaj në internet do të ngarkohet më shpejt, pasi nuk ka nevojë të shkarkojë të gjithë kodin e panevojshëm.

Tani, le të shohim disa nga rastet e përdorimit ku importet dinamike të moduleve mund të jenë të dobishme.

Shembulli 1: Ndarja e kodit

Duke qenë një zhvillues, ne përpiqemi ta ndajmë kodin tonë në sa më shumë pako të jetë e mundur, në mënyrë që të duhet të shkarkojmë një sasi minimale kodi. Dhe nëse keni nevojë për kod shtesë, do ta shkarkoni ndërsa shkoni. Kjo është ajo që ne do të arrijmë me importet dinamike të moduleve.

Për ta kuptuar plotësisht, le t'i hedhim një sy skedarit tonë script.js:

Përsëri, një skedar super i drejtpërdrejtë. Siç mund ta shohim, ne po importojmë një funksion të quajtur setupAdminUser() nga admin.js. Tani, ne do ta quajmë këtë funksion nëse përdoruesi është një administrator. Kështu duket një import normal.

Problemi me këtë qasje është se pavarësisht se çfarë lloji i përdoruesit është në të vërtetë, admin.js do të shkarkohet gjithmonë. Por do të ekzekutohet vetëm nëse është një përdorues administratori. Pra, ndoshta për shumicën e përdoruesve, ne thjesht po e shkarkojmë këtë skedar pa nevojë, i cili mund të përmbajë një sasi të madhe kodi. Ky është në fakt një vend ideal ku mund të përdorni importet dinamike të modulit.

Tani, shikoni këtë kod më poshtë:

Këtu, në vend që të shkarkohet gjithmonë admin.js, ai do të shkarkohet vetëm nëse përdoruesi është administrator. Dhe vërtet, ne mund të kemi kursyer shumë gjerësi brezi dhe aplikacioni ynë do të shkarkohet më shpejt.

Shembulli 2: Zvogëloni përdorimin e kujtesës

Përshpejtimi i kohës së ngarkimit të faqes është një rast i dukshëm përdorimi për importet dinamike të moduleve, por një rast tjetër përdorimi është kur keni një mori skedarësh të ndryshëm nga të cilët ju nevojitet vetëm një, kështu që ju duhet të shkarkoni vetëm një. Pa import dinamik, duhet t'i shkarkoni të gjitha. Skedarët e përkthimit të gjuhës janë një përshtatje e mirë për të.

Për të përmendur një shembull, le të imagjinojmë se kemi një aplikacion uebi shumëgjuhësh që mbështet tre gjuhë: anglisht, frëngjisht dhe spanjisht. Ne thjesht përdorim deklaratat e importit për të marrë përkthimet dhe i përdorim ato me kusht si ajo që tregohet në kodin e mëposhtëm:

Siç mund ta shihni, edhe nëse i përdorim përkthimet me kusht një nga një, ne ende po i importojmë të gjitha dhe kjo është arsyeja pse të tre skedarët e përkthimit do të shkarkohen pavarësisht nga vendndodhja aktuale e përdoruesit.

Tani, imagjinoni që këto skedarë përkthimi janë shumë të mëdha dhe ju keni njëzet prej tyre. Të gjitha do të shkarkohen, gjë që do të çojë në performancë më të dobët të aplikacionit tonë në ueb.

Në vend që t'i shkarkojmë të gjitha këto menjëherë, ne mund të përdorim importe dinamike dhe të shkarkojmë vetëm skedarin që kërkohet për momentin. Ne mund ta bëjmë këtë si kjo:

Tani, kjo duket shumë më mirë se ajo e mëparshme. Dhe në fakt funksionon shumë më mirë se ai i mëparshmi. Këtu ne thjesht po importojmë skedarët e përkthimit në mënyrë dinamike bazuar në vendndodhjen e përdoruesit dhe madje krijojmë emrin e skedarit të përkthimit në mënyrë dinamike. Pastaj, gjithçka duket e ngjashme me gjërat që kemi parë tashmë në shembujt e mëparshëm.

Ne në fakt e trajtuam edhe importin e paracaktuar duke përdorur catch, kështu që nëse nuk gjendej asnjë vend lokal, përkthimet në anglisht do të importoheshin si parazgjedhje.

Kjo mënyrë na lejon të shkarkojmë vetëm një skedar, i cili kursen hapësirën e memories dhe gjithashtu kursen në shpejtësinë e shkarkimit. Super e dobishme.

Shembulli 3: Rritja e performancës së kodit

Tani ky shembull i fundit që do të diskutojmë është shumë i ngjashëm me atë të mëparshëm, por fokusi do të jetë pak më ndryshe. Shembulli i fundit kishte të bënte me kursimin e kohës dhe kujtesës, sepse në vend që të shkarkonin qindra skedarë masivë, ne po shkarkonim vetëm një skedar. Ky rast përdorimi ka të bëjë me kursimin e kohës dhe kujtesës, por vetëm nëse na nevojitet.

Tani, për të kuptuar plotësisht shembullin, le të imagjinojmë se kemi një skedar që duket diçka si kjo:

Siç mund ta shohim, ne kemi një sërë formash dhe kemi ndërtuar një motor kompleks renderi ku mund të kemi qindra forma të ndryshme që duam t'i japim. Normalisht, ajo që duhet të bëjmë është të importojmë të gjithë motorët e renderimit për çdo formë, më pas duhet të kontrollojmë se cila formë është dhe më pas ta nxjerrim atë. Ne po e bëjmë këtë duke përdorur deklaratën switch. Shumë e drejtpërdrejtë, apo jo?

Problemi me këtë qasje është përsëri shkarkimi i skedarëve të panevojshëm.

Me import dinamik, mund të sigurohemi që do të importojmë vetëm ato skedarë që na duhen. Pra, imagjinoni se dëshironi të jepni vetëm një trekëndësh. Në atë rast, nuk kemi pse të importojmë skedarin drejtkëndësh. Kështu që ne mund të ndryshojmë kodin për të trajtuar importet në mënyrë dinamike si kjo:

Përfitimi i kësaj qasjeje është se nëse heqim, le të themi trekëndësh, nga grupi shapes, atëherë triangle.js nuk do të importohet. Që kursen kohë, kujtesë dhe hapësirë.

Gjithashtu, ka diçka që është shumë e bukur është se ne në fakt mund të përdorim async-await ashtu në vend të premtimeve. Pra, nëse jeni më të kënaqur me async-await, mund të bëni diçka si kjo:

Kjo është ajo për këtë artikull. Shpresoj se keni mësuar diçka të re sot. Për të lexuar më shumë artikuj si ky, qëndroni të sintonizuar!

Faleminderit per leximin!