Laiskan latauksen ymmärtäminen Recotect nativessa

React Native on tullut go-to puitteet cross-platform mobiilin kehityksen, jolloin kehittäjät voivat rakentaa natiivitason sovelluksia JavaScript ja React. Sovellusten mittakaavassa, suorituskyky pullonkaulat usein esiin varsinkin alkukuorman aikana. Yksi tehokkaimmista strategioista lieventää näitä kysymyksiä on []]lazy lastaus[]]. Tämä tekniikka lykkää lastaus komponenttien, näyttöjen ja resurssien kunnes niitä todella tarvitaan, vähentää sovelluksen käynnistysaika ja muistijalanjälki. Tässä laajennettu opas, me usva syvälle osaksi osaksi osaksi osaksi laiskaa lastaus React Native, tutkimalla kaikkea perusmalleista kehittyneitä integroitumista navigointi ja kuvankäsittely.

Mitä Lazy Ladataan?

Laiska lataus on suunnittelukuvio, joka lykkää kohteen, komponentin tai resurssin alustusta siihen pisteeseen, jossa se on tarpeen. React Nativen yhteydessä tämä tarkoittaa, että näyttöä tai osaa ei ladata ja renderöidä ennen kuin käyttäjä navigoi sille tai sen näkyvyys lähestyy.

  • Nopea alkutulostus[ . Sovellus käynnistyy vain olennaisilla osilla, joten käyttäjä näkee sisällön aikaisemmin.
  • Alhaisempi muistin käyttö[ .
  • Parempi reagointi [ . Päälanka ei ole estetty raskaalla tuonnilla käynnistettäessä.

React Native -tilassa laiska kuormaus toteutetaan tyypillisesti dynaamisen tuonnin kautta käyttäen ja tai kirjastokohtaisten ratkaisujen kautta, kuten React Navigation, näytön tason laiskaa lastausta varten.

Laiskan lataamisen edut React Native

Laiska lastaaminen tuo mukanaan monenlaisia parannuksia:

  1. Lähetetty alkupakan koko[ ... koodin jakaminen mahdollistaa JavaScript-paketin jaon pienempiin osiin, jotka on ladattu pyynnöstä. Tämä on tärkeää, koska React Native-sovellukset lähettävät yhden JavaScript-paketin, joka on jäsennettävä ja toteutettava laukaisun yhteydessä.
  2. Nopea aika interaktiiviseen (TI)[ ... Sovellus tulee käyttökelpoiseksi aikaisemmin, koska raskaita laskelmia ja suuria kirjastojen tuonti viivästyy.
  3. Parempi akun käyttöikä[ .
  4. Helpompi huolto[ . Laiska lastaus kannustaa modulaarinen koodi, jolloin koodikanta on helpompi navigoida ja testata.

Vaikka nämä edut ovat yleismaailmallisia, laiska lataus on erityisen arvokasta sovelluksille, joissa on monia näyttöjä, monimutkaisia kaavioita, rikkaita mediaa tai kolmannen osapuolen SDK.

Toteutus Laiska Ladataan RECT.lazy ja Supsense

React Native tukee ja [ alkaen versio 0.62. Kuitenkin on vivahteita verrattuna React Web. Let.

Perusasetukset

Ensinnäkin varmista, että käytät yhteensopivaa React Native versiota (>=0,62) ja että nippusi (Metro) on määritetty tukemaan dynaamista tuontia. Metro tukee dynaamista tuontia laatikkoon versiosta 0.59 lähtien.

Vaihe 1 . Laiska Laiska Laiska Laata Komponentti

Luo raskas komponentti, esimerkiksi monimutkainen kaavio tai suuri luettelo, ja tuo se []:

Vaihe 2 ... Kääritään supsenssilla

Varakäyttöliittymän tarjoaminen komponenttia kuormitettaessa:

[[LLT:6]]

Tärkeä luola React native

Webissä toimii saumattomasti React.lazyn kanssa. React Nativessa [ on saatavilla, mutta kaikki komponenttityypit eivät toimi täydellisesti sen sisällä.Erityisesti perinteiset luokan osat tai komponentit, jotka luottavat [] sivuvaikutusten osalta. Testaa aina laiskat komponenttisi oikeilla laitteilla. Useimmissa käyttöosissa se toimii hienosti.

Laiska lastaustekniikka

Näytön taso Laiska ladataan näytöllä

Yleisin mobiilisovellusten laiskan latauksen käyttötapaus on näytön latauksen lykkääminen. React Navigation, de facto navigation library, tukee tätä mallia laatikosta sen ) prop ja dynaaminen kautta.

Esimerkki React Navigation 6:lla:

[[LUOTTO:12]]

Voit optimoida käyttämällä []prefetsing[:a: kun käyttäjä leijailee välilehden päällä tai navigoi näytölle, voit aloittaa seuraavan näytön lataamisen etukäteen käyttäen tai manuaalista puhelua.

Laiska ladataan kuvia

Kuvat ovat usein mobiilisovelluksen raskaimpia ominaisuuksia. Laiska lataus tarkoittaa niiden lataamista, kunnes ne ovat lähellä näkymää. Voit saavuttaa tämän kirjastojen avulla kuten [reaction-native-fast-image[] tai expo-image[], joista molemmista tuetaan laiskaa lastausta ja välimuistia laatikosta. Käytä mukautetun ratkaisun yhteydessä -malleja ]- tai [-julkaisujen [-julkaisun] kautta.

Esimerkki FlatList to laiska load usually:

Tämä lähestymistapa varmistaa, että vain näkyvissä olevat kohdat renderoidaan, kun taas muut kohteet virtualisoidaan.

Koodi Jakaminen React.lazy ja React Navigation Näytön

Suurille sovelluksille JavaScript-paketti voidaan jakaa myös näytölle React.lazy-yhdistelmällä React Navigation.s -toiminnolla React Navigation v5:stä. Huomaa kuitenkin, että React Navigation v6 käyttää komponenttia suoraan, joten voit kääriä sen laiskasti kuten yllä on esitetty.

Parhaat käytännöt laiska ladataan React Native

  • Tunnista mitä laiska kuorma[ . Profiili sovelluksesi löytää raskaimmat komponentit. Tyypillisesti nämä ovat kaavioita, karttoja, videopelaajia, monimutkaisia muotoja, ja näyttää käyttäjän harvoin käy.
  • Tuottakaa mielekkäitä varaosia[ . Käytä luurankonäyttöjä, loistavia vaikutuksia tai aktiivisuusindikaattoreita, jotta käyttäjä tietää, että jotain tapahtuu.
  • Yhdistä välimuistiin[] . Kun komponentti on ladattu, harkitse sen pitämistä muistissa valtionhallinnassa (esim., Redux, Recoil) tai , jotta vältetään uudelleenlaskeutuminen.
  • Vältä laiskaa lastausta vähäpätöisiä komponentteja[] ... Dynaamisen tuonnin ja sumun yläpuolella voi olla suurempi kuin hyvin pienten komponenttien hyödyt (esim. yksi ).
  • Testaa matalan end-laitteiden[ . ... Suorituskyky on näkyvintä laitteissa, joissa on rajallinen RAM ja hitaammat suorittimet. Emuloida nämä ehdot.
  • Käytä Metroa inline vaatii[ . Vanhoissa hankkeissa, joissa ei voida käyttää dynaamista tuontia, Metro tukee . Metron konfiguraatiossa on tarkoitus lykätä moduulin lataamista. Tämä on alempien mutta tehokkaiden ratkaisujen omaksumista.

Yhteinen pitfalls ja miten välttää niitä

1. Yli-Laiska Ladataan

Laiska lataaminen jokainen komponentti voi johtaa hyytävään käyttäjäkokemukseen liian monella latauspyöräyttimen. Keskity näyttöihin ja kalliisiin komponentteihin.

2. Laiska lataaminen siirtymän aikana

Jos laiskottelu lataa näytön, johon käyttäjä navigoi pinon tai välilehden siirtymisen kautta, lataustila voi aiheuttaa jarringin viiveen. Harkitse esinostoa, kun edellinen näyttö on asennettu tai kun käyttäjä leijuu painikkeen päällä.

3. Ei käsitellä virheitä

Dynaaminen tuonti voi epäonnistua verkkoongelmien tai nippukorruption vuoksi. Käytä virheisiin Supsense-varoitusjärjestelmässä:

4. Epäjohdonmukainen käytös eri alustoilla

iOS ja Android voivat käsitellä eri tavalla. Aina testata molemmilla alustoilla.

Suorituskyvyn mittaus ja seuranta

Ennen laiskan latauksen käyttöönottoa on määritettävä perustason mittaukset käyttämällä työkaluja, kuten [React Native Performance Monitor (saatavilla kehittäjän valikosta), Flipper[] tai []React DevTools[.

  • Aika ensimmäisen renderoinnin tekemiseen (TTIR)
  • Aika vuorovaikutteiseen (TTI)
  • Muistin käyttö ennen ja jälkeen laiskan lastauksen
  • Syöttökooltaan kuutiometriä kohti

Toteutuksen jälkeen, uudelleen mitata määrällisesti parannuksia. Monissa reaalimaailmassa React Native sovelluksia (esim. Shopify...sovellus[]), laiska lastaus vähensi käynnistysaikaa yli 40%.

Ulkoiset resurssit ja jatkolukeminen

Päätelmät

Lazy lastaus ei ole hopea luoti, mutta kun sitä sovelletaan oikein, se on yksi tehokkaimmista työkaluista React Native kehittäjä työkalusarja. Lykkäämällä lastaus ei-tärkeitä osia, kuvia ja näytöt, voit dramaattisesti leikata alkukuormitusaikoja, vähentää muistin painetta, ja toimittaa silkkinen-smooth kokemus käyttäjille. Aloita raskaimmat rikoksentekijät sovelluksen. Tyypillisesti roiskeita näyttöjä, monimutkaisia kaavioita, tai harvoin vieraili välilehtiä. Ja vähitellen laajentaa laiska lastaus muihin osiin. Muista mitata, testata todellisia laitteita, ja tarjota herttainen takaiskuja. Huolellinen toteutus, laiska lataus tekee React Native sovellus tuntuu nopeammin ja ammattimaisempi.