Komponenttien laiska lataus
Siirtäkää ei-kriittisten komponenttien renderöinti myöhemmäksi dynaamisten importien ja intersection observerien avulla.
Komponenttien laiska lataus on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Miksi käyttää lazy-latausta
Siirtäkää raskaiden tai ei-kriittisten komponenttien lataamista myöhemmäksi, jotta aloitusbundlen koko pienenee.
Dynaaminen import
Käyttäkää import()-kutsua moduulin asynkroniseen lataamiseen.
let Component;
onMount(async () => {
Component = (await import("./Heavy.svelte")).default;
});Renderöinti latauksen jälkeen
Käyttäkää <svelte:component>-elementtiä dynaamisen komponentin renderöimiseen.
{#if Component}
<svelte:component this={Component} />
{/if}Intersection Observer
Yhdistäkää tämä IntersectionObserveriin, jotta komponentti latautuu paikanvaraajan tullessa näkyviin.
Action-kääre
Rakentakaa uudelleenkäytettävä use:lazy-action, joka kapseloi tämän rakenteen.
Lataustila
Näyttäkää skeleton tai latausilmaisin, kunnes komponentti on ladattu.
Käyttö näkyvän alueen alapuolella
Kommentit, aiheeseen liittyvät julkaisut ja alatunnisteen widgetit sopivat kaikki lazy-lataukseen.
Suorituskykyhyödyt
Ratkaisu vähentää aloitusvaiheen JavaScriptiä ja nopeuttaa TTI:tä erityisesti mobiililaitteilla.
Ennakkohaku
Voitte halutessanne esiladata moduuleja osoittimen ollessa kohteen päällä tai kohteen lähestyessä näkymää, jotta vuorovaikutus tuntuisi nopeammalta.
Vältä liiallista pilkkomista
Pienten komponenttien kohdalla dynaamisen importin aiheuttama lisäkustannus on säästöä suurempi.
Yhdistä streamaukseen
Palvelimella renderöidyillä sivuilla streamaus ja lazy-hydraus nopeuttavat ensimmäisiä piirtoja.
Pikatarkistus
Miten dynaamisesti importattu komponentti renderöidään?
Kertaus
Ladatkaa raskaat komponentit lazy-menetelmällä dynaamisen importin ja svelte:componentin avulla, tarvittaessa näkyviin tulon perusteella.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Komponenttien laiska lataus” ilmainen?
Kyllä – oppitunnin ”Komponenttien laiska lataus” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Komponenttien laiska lataus”?
Siirtäkää ei-kriittisten komponenttien renderöinti myöhemmäksi dynaamisten importien ja intersection observerien avulla. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Sveltejs Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Komponenttien laiska lataus”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Sveltejs Academy-oppitunnilla?
Kyllä. Jokainen Sveltejs Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Koodin jakaminen ja dynaamiset importit
- Kuvien optimointi @sveltejs/enhanced-img:llä
- Komponenttien laiska lataus
- SvelteKit-sovellusten profilointi