Vue Academy · Oppitunti

Laiska lataus ja koodin jakaminen

Jakakaa bundlet ja ladatkaa komponentit ja reitit laiskasti.

Oppitunti 1/313 vaihetta

Laiska lataus ja koodin jakaminen on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 3 oppituntia.

Miksi paketin koolla on merkitystä

Kun kaikki toimitetaan yhtenä suurena JavaScript-tiedostona, käyttäjät joutuvat odottamaan pidempään ensimmäisen näkymän ilmestymistä. Code splitting jakaa sovelluksen pienempiin osiin, jotka ladataan vain tarvittaessa. Tämä pienentää aloituslatausta ja nopeuttaa käynnistymistä.

Dynaaminen import()

Keskeinen työkalu on dynaaminen import()-funktio. Toisin kuin tiedoston alussa tehtävä staattinen import, se lataa moduulin tarpeen mukaan ja palauttaa promisen. Bundlerit jakavat jokaisen dynaamisen importin omaksi osakseen.

const module = await import("./heavyModule.js")
module.doSomething()

Reittikohtainen code splitting

Suurin hyöty saadaan jakamalla koodi reittien mukaan, jolloin jokainen sivu lataa oman koodinsa. Vue Routerissa välittäkää suoraan importin sijaan funktio, joka palauttaa dynaamisen importin.

const routes = [
  {
    path: "/dashboard",
    component: () => import("./views/Dashboard.vue")
  }
]

Staattiset ja laiskat reitit

Verratkaa näitä kahta tapaa. Staattinen import sisällyttää komponentin pääosaan, kun taas lazy-versio luo erillisen osan, joka haetaan vasta, kun reitillä vieraillaan.

// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"

// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")

defineAsyncComponent

Kun haluatte ladata komponentin lazily reitittimen ulkopuolella, käärikää dynaaminen import defineAsyncComponent-funktion ympärille. Vue lataa komponentin vasta, kun se renderöidään ensimmäisen kerran.

import { defineAsyncComponent } from "vue"

const Chart = defineAsyncComponent(() =>
  import("./components/HeavyChart.vue")
)

Asynkronisten komponenttien rekisteröinti

Rekisteröikää asynkroninen komponentti kuten mikä tahansa muukin komponentti ja käyttäkää sitä templaatissa. Vue huolehtii lataamisesta läpinäkyvästi.

export default {
  components: {
    HeavyChart: defineAsyncComponent(() =>
      import("./components/HeavyChart.vue")
    )
  }
}

Lataus- ja virhetilat

defineAsyncComponent-funktion edistyneempi muoto hyväksyy asetuksia, joiden avulla voitte näyttää paikkamerkin latauksen aikana ja varasisällön latauksen epäonnistuessa.

const Chart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: Spinner,
  errorComponent: LoadError,
  delay: 200,
  timeout: 5000
})

Raskaiden komponenttien lataaminen lazily

Hyviä lazy-latauksen kohteita ovat raskaat tai harvoin käytetyt osat, kuten kaaviot, rich text -editorit, kartat tai modaaliset ikkunat, jotka vain osa käyttäjistä avaa.

const RichEditor = defineAsyncComponent(() =>
  import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shown

Ehdollinen lataus v-if:llä

Yhdistäkää asynkroninen komponentti v-if-direktiiviin, jotta sen osa haetaan vasta, kun käyttäjä käynnistää sen.

<template>
  <button @click="showEditor = true">Edit</button>
  <RichEditor v-if="showEditor" />
</template>

Nimetyt osat virheenkorjausta varten

Webpack-tyyliset magic commentit antavat osille luettavat nimet, mikä helpottaa verkkovälilehden ja build-tulosteen tutkimista.

const Reports = () => import(
  /* webpackChunkName: "reports" */ "./views/Reports.vue"
)

Vaikutusten mittaaminen

Tarkistakaa jakamisen jälkeen buildin tuloste tai selaimen verkkovälilehti. Teidän pitäisi nähdä yhden suuren bundlen sijaan useita pienempiä chunk-tiedostoja, ja alustavan latauksen pitäisi ladata vähemmän koodia.

Pikatarkistus

Testatkaa tietonne lazy loadingista.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Dynaamisella import()-komennolla tehty koodin jakaminen pienentää alustavaa bundlea. Käyttäkää lazy-reiteillä importin palauttavaa funktiota ja tarvittaessa ladattavilla komponenteilla defineAsyncComponent-funktiota sekä lataus- ja virhetiloja. Ladatkaa raskaat tai harvoin käytetyt osat lazy-latauksella, jotta käynnistys pysyy nopeana. Seuraavaksi opitte välimuistittamaan ja ohittamaan tarpeettoman työn memoization avulla.

Aloita maksutta

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: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Laiska lataus ja koodin jakaminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Laiska lataus ja koodin jakaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Laiska lataus ja koodin jakaminen”?

Jakakaa bundlet ja ladatkaa komponentit ja reitit laiskasti. Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/3.

Kuinka kauan ”Laiska lataus ja koodin jakaminen”-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ä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue 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

Laiska lataus ja koodin jakaminen
Memoisointitekniikat
Pullonkaulojen tunnistaminen ja korjaaminen

← Takaisin: Vue Academy