import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

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

function App() {
  return (
    
      Loading...

Tässä esimerkissä Home-, About- ja Products-komponentit ladataan laiskasti. Suspense-komponentti tarjoaa varalla olevan käyttöliittymän (tässä tapauksessa "Loading...") komponenttien latautumisen ajaksi.

Esimerkkiskenaario: Kuvittele globaali sosiaalisen median alusta. Kun käyttäjä kirjautuu sisään ensimmäistä kertaa, hänet ohjataan uutissyötteeseensä (Home). Koodi ominaisuuksille, kuten käyttäjäprofiileille (About) tai kauppapaikalle (Products), ladataan vasta, kun käyttäjä siirtyy näihin osioihin, mikä parantaa alkuperäistä latausaikaa.

Angular

Angular tukee moduulien laiskaa lataamista reitittimen (router) konfiguraation kautta. Voit käyttää loadChildren-ominaisuutta määrittääksesi moduulin, joka ladataan tarvittaessa.

            
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

            

              
                Copy
              
            
          

Tässä esimerkissä HomeModule, AboutModule ja ProductsModule ladataan laiskasti, kun käyttäjä siirtyy vastaaville reiteilleen.

Esimerkkiskenaario: Ajattele monikansallisen yrityksen sisäistä verkkoportaalia. Eri osastoilla (esim. HR, talous, markkinointi) on omat moduulinsa. Koodin jakaminen varmistaa, että työntekijät lataavat vain niiden osastojen koodin, joiden kanssa he ovat vuorovaikutuksessa, mikä tehostaa latausprosessia.

Vue.js

Vue.js tukee komponenttien laiskaa lataamista käyttämällä dynaamisia import-lausekkeita reitittimen konfiguraatiossa.

            
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/products',
    name: 'Products',
    component: () => import(/* webpackChunkName: "products" */ '../views/Products.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

            

              
                Copy
              
            
          

Tässä Home.vue-, About.vue- ja Products.vue-komponentit ladataan laiskasti, kun niiden vastaaville reiteille siirrytään. webpackChunkName-kommentti auttaa Webpackia luomaan erilliset osat (chunks) kullekin komponentille.

Esimerkkiskenaario: Kuvittele globaali verkko-oppimisalusta. Kurssimoduulit (esim. matematiikka, historia, tiede) voidaan ladata tarpeen mukaan, kun opiskelijat ilmoittautuvat niille. Tämä lähestymistapa minimoi alkuperäisen latauskoon ja optimoi käyttökokemuksen.

Reittipohjaisen koodin jakamisen edut

• Yksinkertainen toteutus: Suhteellisen helppo ottaa käyttöön ja ymmärtää.
• Selkeä vastuunjako: Sopii hyvin monien verkkosovellusten rakenteeseen.
• Parempi alkuperäinen latausaika: Merkittävä vähennys etukäteen ladattavan koodin määrässä.

Reittipohjaisen koodin jakamisen haitat

• Mahdollinen koodin päällekkäisyys: Jaetut komponentit tai riippuvuudet saattavat sisältyä useisiin reittikohtaisiin osiin, mikä johtaa koodin päällekkäisyyteen.
• Rajoitettu tarkkuus: Ei välttämättä ole ihanteellinen sovelluksille, joissa on monimutkaisia komponentteja jaettuna useiden reittien kesken.

Komponenttipohjainen koodin jakaminen

Komponenttipohjainen koodin jakaminen tarkoittaa sovelluksesi koodin jakamista yksittäisten komponenttien perusteella kokonaisten reittien sijaan. Tämä mahdollistaa tarkemman lähestymistavan koodin lataamiseen, lataamalla vain tiettyjen komponenttien vaatiman koodin silloin, kun niitä tarvitaan.

Toteutus

Komponenttipohjainen koodin jakaminen on monimutkaisempaa kuin reittipohjainen, mutta se tarjoaa enemmän joustavuutta ja optimointipotentiaalia. Jälleen kerran, toteutus vaihtelee kehyksen mukaan.

React

Reactissa voit käyttää React.lazy- ja Suspense-komponentteja ladataksesi yksittäisiä komponentteja laiskasti reitin tai toisen komponentin sisällä.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>