Opas laiskalle lataamiselle Reactilla

esittely

Kun kehitämme suuria React-sovelluksia, käytämme yleensä monia kuvia ja videoita, asennamme kolmannen osapuolen paketteja/kirjastoja, teemme API-kutsuja ja teemme monia muita asioita. Tämä luonnollisesti pidentää sovelluksemme lataamiseen kuluvaa aikaa ja johtaa valtavaan nippukokoon, mikä vaikuttaa huonoon käyttökokemukseen. Siellä laiska lastaus tulee paikalleen. Sen avulla voimme ladata sisältöä juuri ajoissa, juuri ennen kuin se näkyy sovelluksessa.

Voimme välttää sisällön esilataamisen, kun se on vielä poissa näkyvistä, ja keskittää kaikki resurssit näkymässä olevaan sisältöön.

Tässä oppaassa tarkastellaan, kuinka sitä käytetään React.lazy() ja React.Suspense toteuttaa laiska lataus- ja koodinjakotoiminto, jonka avulla voimme käsitellä koodin jakamista ilman, että tarvitsemme asentaa lisäkirjastoja.

Mikä on laiska lataus?

Kun käynnistämme React-verkkosovelluksen, se yleensä niputtaa koko sovelluksen kerralla ja lataa kaiken, mukaan lukien koko verkkosovellussivut, kuvat, sisällön ja paljon muuta puolestamme, mikä saattaa johtaa hitaaseen latausaikaan ja yleiseen huonoon suorituskykyyn riippuen sisällön koko ja Internetin kaistanleveys kulloinkin.

Laiska lastaus mahdollistaa tiettyjen komponenttien lataamisen vain silloin, kun niitä tarvitaan. Yleensä myös esiintyy koodin jakaminen loogisiksi komponenteiksi, joita voidaan myös laiska ladata sisällöllä.

Jos meillä on esimerkiksi kojelautasivu, joka näyttää paljon tietoa eri lähteistä, kun sitä napsautetaan, on aina parasta pitää nämä komponentit ja sivut laiskasti ladattuina, jotta ne latautuvat vain silloin, kun käyttäjä tarvitsee tai sitä vaatii.

Huomautus: Prosessi, jossa suuri koodinippu syljetään useiksi nipuiksi, jotka voidaan ladata dynaamisesti yleistavoitteena välttää ylisuuriin nippuihin liittyvät suorituskykyongelmat tunnetaan nimellä koodin jakaminen. Tämä saavutetaan vähentämättä sovelluksemme koodin määrää.

Yhteenvetona voidaan todeta, että laiska lataaminen antaa meille mahdollisuuden renderöidä komponentteja tai elementtejä pyynnöstä, mikä tekee sovelluksestamme tehokkaamman ja tarjoaa paremman käyttökokemuksen.

Huomautus: Yhden sivun sovellukset (kylpylät) on suunniteltu sisältämään kaikki sivut ja sisältö yhdellä asiakirjalla/sivulla. Siksi laiska lastaus on erityisen kätevää SPA-alueiden kehittämisessä.

Kuinka toteuttaa laiska lataus Reactissa

Toistaiseksi olemme nähneet, mitä laiska lataaminen on ja miksi se on tärkeää toteuttaa. Katsotaan nyt, kuinka voimme ottaa sen käyttöön React-sovelluksissamme käyttämällä kahta React-ominaisuutta, jotka tekevät koodin jakamisesta ja laiskasta lataamisesta helppoa toteuttaa – React.lazy() ja React.Jännitys.

React.lazy() on funktio, jonka avulla voimme hahmontaa dynaaminen tuonti samalla tavalla kuin tavalliset komponentit. Dynaamisten tuontien käyttäminen React.lazy() avulla voimme tuoda komponentin juuri ennen kuin se hahmonnetaan näytöllä. Tärkeä huomioitava asia on se React.lazy() hyväksyy funktion argumenttina – funktion on kutsuttava dynamiikkaa import() sen kehossa.

React.Suspense antaa meille mahdollisuuden määrittää varavaihtoehdon pönkittää joka ottaa paikkamerkkisisällön, jota käytettäisiin a latausilmaisin samalla kun kaikki laiskot komponentit latautuvat.

Aloitetaan tarkastelemalla, kuinka voimme toteuttaa laiskalatauksen tuoduissa komponenteissamme ja sitten kuinka voimme toteuttaa sen reiteillämme niin, että sivut eivät lataudu ennen kuin navigoimme niihin.

Päästä alkuun

Oletetaan, että meillä on React-sovellus ja toimme sen About komponentti osaksi Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Voimme nyt toteuttaa laiskalatauksen hyödyntämällä React.lazy():

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Huomautus: React.lazy() tällä tavalla käytettynä palauttaa a Promise esine. Tämä lupaus ratkaisee moduulin, joka sisältää React-komponentin, jonka haluamme laiska ladata siihen default viedä.

Olemme ottaneet käyttöön laiskalatauksen React.lazy(), mutta yllä oleva koodi heittää aina virhe sanomalla, että meidän “React component suspended while rendering, but no fallback UI was specified”. Tämä voidaan korjata käärimällä komponentti React.Suspensen fallbackz ja vararekvisiitta kiinnittäminen kuten aiemmin selitimme:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Huomautus: Varapalkki voi viedä komponentin näkyviin ennen kuin alkuperäinen sisältö latautuu.

Lisäksi voimme päättää tuhoaminen React-tuonti tekee koodista selkeämmän ja luettavamman:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Toistaiseksi olemme nähneet, kuinka laiska lataus voidaan toteuttaa tuoduissa komponenteissa. Katsotaan nyt, kuinka se otetaan käyttöön reiteillämme reitittäessäsi React-reitittimellä.

Kuinka toteuttaa laiska lataus React-reitittimellä

Laiska reititys on itse asiassa hyvä käytäntö reiteille, joilla on paljon sisältöä ja jotka voivat hidastaa sovelluksesi latausaikaa. Laiskan lataamisen toteuttaminen React-reiteillä on lähes identtistä sen kanssa, mitä teimme aiemmin, kun latasimme laiskalla dynaamisesti tuotuja komponentteja.

Laiska lataus React-reitit tarkoittaa komponentin dynaamista tuontia vain silloin, kun sitä tarvitaan. Oletetaan esimerkiksi, että sovelluksessamme on kaksi reittiä ja kaksi komponenttia, jotka edustavat näitä reittejä. Jos toteutamme mainitun reitityksen seuraavalla tavalla, jokainen komponentti latautuu vain, kun navigoimme vastaavalle reitille:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Yhteenveto

Tässä oppaassa opimme, mitä laiska lataus ja koodin jakaminen ovat, miten ne toteutetaan ja että paras paikka laiskalatauksen toteuttamiseen on reittien avulla. Näin vältetään koko sivun renderöiminen kerralla, mikä voi hidastaa latausaikaa, kun käsitellään sivuja, joilla on suuria määriä sisältöä.