Gebruik React.lazy met vertrouwen: Een veilige manier om componenten te laden bij snel itereren

Het dilemma#

Tegenwoordig gaat softwareontwikkeling sneller volgens de populaire "snel bewegen en dingen breken" filosofie. Geen oordeel hier - het is gewoon hoe het is. Echter, deze snelle tempo kan soms leiden tot problemen, vooral als het gaat om het laden van componenten in React.

Als je werkt aan een project dat React.lazy gebruikt om componenten op aanvraag te laden, ben je mogelijk problemen tegengekomen zoals ChunkLoadError en Loading chunk failed. Hier zijn enkele mogelijke redenen:

• Er is een netwerkprobleem, bijvoorbeeld, de internetverbinding van de gebruiker is traag of onstabiel.
• De gebruiker heeft een verouderde versie van de app, en de browser probeert een chunk te laden die niet meer bestaat.

Meestal kan een eenvoudige verversing van de pagina het probleem oplossen, maar het biedt geen geweldige gebruikerservaring. Stel je voor dat een wit scherm verschijnt wanneer de gebruiker naar een andere route navigeert - dat ziet er niet goed uit voor je app.

Kunnen we de behoefte aan snelheid balanceren met de behoefte aan een soepele gebruikerservaring? Zeker. Laat me je laten zien hoe (natuurlijk met TypeScript).

De oplossing#

Een brute force-oplossing kan zijn om alle versies van de chunks op de server op te slaan, waardoor er geen "missing chunk" probleem meer is. Naarmate je app groeit, kan deze oplossing onpraktisch worden vanwege toenemende schijfruimtevereisten, en het lost het netwerkprobleem nog steeds niet op.

Gezien het feit dat een retry of een refresh het probleem kan oplossen, kunnen we deze oplossingen in onze code implementeren. Aangezien het probleem meestal optreedt wanneer de gebruiker naar een andere route navigeert, kunnen we het oplossen zonder dat de gebruiker het merkt. Het enige dat we hoeven te doen, is een wrapper rond de React.lazy functie bouwen die de retries en refreshes afhandelt.

Er zijn al enkele geweldige artikelen over het implementeren van dit soort oplossingen, dus ik zal me concentreren op het idee en het innerlijke werk van de oplossing.

Maak de wrapper#

De eerste stap is om een wrapper rond de React.lazy functie te maken:

Behandel de retries#

Voor netwerkproblemen kunnen we de retries afhandelen door de importFunction in te wikkelen in een tryImport functie:

Ziet er simpel uit, toch? Je kunt ook het exponential backoff algoritme implementeren om de retries efficiënter af te handelen.

Behandel de refreshes#

Voor het verouderde versieprobleem kunnen we de refreshes afhandelen door de fout op te vangen en de pagina te verversen:

Echter, deze implementatie is erg gevaarlijk, omdat het een oneindige lus van refreshes kan veroorzaken wanneer de fout niet opgelost kan worden met een refresh. Ondertussen gaat de app-status verloren tijdens de refresh. Dus we hebben de hulp van sessionStorage nodig om het bericht op te slaan dat we geprobeerd hebben om de pagina te verversen:

Nu, wanneer we de fout van de safeLazy functie opvangen, weten we dat het iets is dat niet opgelost kan worden met een refresh.

Meerdere lazy componenten op dezelfde pagina#

Er is nog steeds een verborgen valkuil met de huidige implementatie. Als je meerdere lazy componenten op dezelfde pagina hebt, kan de oneindige lus van refreshes nog steeds optreden omdat andere componenten de sessionStorage waarde kunnen resetten. Om dit probleem op te lossen, kunnen we een unieke sleutel voor elk component gebruiken:

Nu zal elk component zijn eigen sessionStorage sleutel hebben, en de oneindige lus van refreshes zal vermeden worden. We kunnen doorgaan met het finetunen van de oplossing, bijvoorbeeld:

• Alle sleutels in een array verzamelen, zodat slechts één opslag sleutel nodig is.
• Een refresh limiet instellen om de pagina meer dan één keer te verversen voordat een fout wordt gegooid.

Maar ik denk dat je het idee wel hebt. Een uitgebreide TypeScript-oplossing met tests en configuraties is beschikbaar in de GitHub repository. Ik heb ook het react-safe-lazy pakket gepubliceerd op NPM, zodat je het direct in je project kunt gebruiken.

Conclusie#

Softwareontwikkeling is een delicate klus, en zelfs de kleinste details kunnen inspanning vergen om op te lossen. Ik hoop dat dit artikel je kan helpen om de problemen met React.lazy op een gracieuze manier af te handelen en de gebruikerservaring van je app te verbeteren.