Käytä React.lazy:tä luottavaisin mielin: Turvallinen tapa ladata komponentteja, kun iterointi on nopeaa

Dilemma#

Nykyään ohjelmistokehitys etenee nopeammin suositun "move fast and break things" -ajattelutavan mukaisesti. Ei arvostella - tämä on vain tilanne. Kuitenkin tämä nopea tahti voi joskus johtaa ongelmiin, erityisesti kun ladataan komponentteja Reactissa.

Jos työskentelet projektissa, joka käyttää React.lazy:tä komponenttien lataamiseen tarpeen mukaan, olet saattanut kohdata ongelmia, kuten ChunkLoadError ja Loading chunk failed. Tässä on joitakin mahdollisia syitä:

• Verkko-ongelma, esimerkiksi käyttäjän internet-yhteys on hidas tai epävakaa.
• Käyttäjä on vanhentuneessa sovellusversiossa, ja selain yrittää ladata osaa, jota ei enää ole.

Yleensä yksinkertainen sivun lataus uudelleen voi ratkaista ongelman, mutta se ei ole hyvä kokemus käyttäjälle. Kuvittele, jos valkoinen näyttö ilmestyy käyttäjän navigoidessa toiseen reittiin - se ei näytä hyvältä sovelluksessasi.

Voimmeko tasapainottaa nopeuden tarpeen ja sujuvan käyttökokemuksen? Tietysti. Näytän sinulle miten (TypeScriptin kanssa, tietenkin).

Ratkaisu#

Brutaalia voimaa käyttävä ratkaisu voisi olla tallentaa kaikki osaversiot palvelimelle, jolloin "kadonneen osan" ongelmaa ei enää olisi. Kun sovelluksesi kasvaa, tämä ratkaisu voi käydä mahdottomaksi kasvavien levyn tilavaatimusten vuoksi, eikä se silti ratkaise verkko-ongelmaa.

Koska uudelleenyritys tai sivun lataus voi ratkaista ongelman, voimme toteuttaa nämä ratkaisut koodissamme. Koska ongelma ilmenee yleensä käyttäjän navigoidessa toiseen reittiin, voimme ratkaista sen ilman, että käyttäjä huomaa. Meidän tarvitsee vain rakentaa kääre React.lazy-funktion ympärille, joka käsittelee uudelleenyritykset ja sivun lataukset.

On jo olemassa joitakin loistavia artikkeleita siitä, miten tämäntyyppinen ratkaisu toteutetaan, joten keskityn vain ratkaisuidean ja -mekanismien esittelyyn.

Luo kääre#

Ensimmäinen askel on luoda kääre React.lazy-funktion ympärille:

Käsittele uudelleenyritykset#

Verkko-ongelmien varalta voimme käsitellä uudelleenyritykset käärimällä importFunction tryImport-funktion sisään:

Näyttää yksinkertaiselta, eikö? Voit myös toteuttaa eksponentiaalisen perääntymisen algoritmin käsittelemään uudelleenyrityksiä tehokkaammin.

Käsittele uudelleenlataukset#

Vanhentuneen version ongelman varalta voimme käsitellä uudelleenlatauksia sieppaamalla virheen ja lataamalla sivun uudelleen:

Tämä toteutus on kuitenkin erittäin vaarallinen, koska se voi aiheuttaa äärettömän uudelleenlatausluupin, kun virhettä ei voida ratkaista uudelleenlatauksella. Samalla sovellustila menetetään uudelleenlatauksen aikana. Tarvitsemme siis sessionStorage-apua tallentaaksemme viestin siitä, että olemme yrittäneet ladata sivun uudelleen:

Nyt, kun sieppaamme virheen safeLazy-funktiosta, tiedämme, että se on jotain, mitä ei voida ratkaista uudelleenlatauksella.

Useita laiskoja komponentteja samalla sivulla#

Nykyisessä toteutuksessa on vielä piilossa oleva sudenkuoppa. Jos sinulla on useita laiskoja komponentteja samalla sivulla, äärettömän uudelleenlatausluupin mahdollisuus on yhä olemassa, koska muut komponentit voivat nollata sessionStorage-arvon. Ratkaistaaksemme tämän ongelman voimme käyttää uniikkia avainta kullekin komponentille:

Nyt jokaisella komponentilla on oma sessionStorage-avain, eivätkä äärettömät uudelleenlatausluupit enää tapahdu. Voimme jatkaa ratkaisun hienosäätämistä, esimerkiksi:

• Kerätä kaikki avaimet taulukkoon, jolloin tarvitaan vain yksi tallennusavain.
• Määrittää uudelleenlatausraja, joka sallii sivun lataamisen useammin kuin kerran ennen virheen heittämistä.

Mutta uskon, että ymmärrät idean. Kattava TypeScript-ratkaisu testien ja konfiguraatioiden kanssa on saatavilla GitHub-arkistossa. Olen myös julkaissut react-safe-lazy-paketin NPM:ssä, joten voit käyttää sitä projektissasi heti.

Yhteenveto#

Ohjelmistokehitys on hienovaraista työtä, ja jopa pienimmät yksityiskohdat voivat vaatia vaivaa ratkaistakseen. Toivon, että tämä artikkeli voi auttaa sinua käsittelemään React.lazy-ongelmia sulavasti ja parantamaan sovelluksesi käyttökokemusta.