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...

V tomto príklade sú komponenty Home, About a Products načítané lenivo. Komponent Suspense poskytuje záložné UI (v tomto prípade „Loading...“), zatiaľ čo sa komponenty načítavajú.

Príkladový scenár: Predstavte si globálnu platformu sociálnych médií. Keď sa používateľ prvýkrát prihlási, je presmerovaný na svoj spravodajský kanál (Home). Kód pre funkcie ako používateľské profily (About) alebo trhovisko (Products) sa načíta až vtedy, keď používateľ prejde do týchto sekcií, čo zlepšuje počiatočný čas načítania.

Angular

Angular podporuje lenivé načítanie modulov prostredníctvom svojej konfigurácie routera. Môžete použiť vlastnosť loadChildren na špecifikovanie modulu, ktorý by sa mal načítať na požiadanie.

            
// 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
              
            
          

V tomto príklade sú moduly HomeModule, AboutModule a ProductsModule načítané lenivo, keď používateľ prejde na ich príslušné trasy.

Príkladový scenár: Predstavte si interný webový portál nadnárodnej korporácie. Rôzne oddelenia (napr. HR, Financie, Marketing) majú svoje vlastné moduly. Rozdelenie kódu zabezpečuje, že zamestnanci sťahujú iba kód pre oddelenia, s ktorými interagujú, čím sa zefektívňuje proces načítania.

Vue.js

Vue.js podporuje lenivé načítanie komponentov pomocou dynamických importov vo vašej konfigurácii routera.

            
// 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
              
            
          

Tu sú komponenty Home.vue, About.vue a Products.vue načítané lenivo, keď sú navštívené ich príslušné trasy. Komentár webpackChunkName pomáha Webpacku vytvoriť samostatné časti pre každý komponent.

Príkladový scenár: Predstavte si globálnu online vzdelávaciu platformu. Moduly kurzov (napr. Matematika, História, Veda) sa môžu načítať na požiadanie, keď sa do nich študenti zapíšu. Tento prístup minimalizuje počiatočnú veľkosť sťahovaných dát a optimalizuje používateľský zážitok.

Výhody rozdelenia kódu založeného na trasách

• Jednoduchá implementácia: Relatívne ľahké na nastavenie a pochopenie.
• Jasné oddelenie zodpovedností: Dobre sa zhoduje so štruktúrou mnohých webových aplikácií.
• Zlepšený počiatočný čas načítania: Výrazné zníženie množstva kódu načítaného na začiatku.

Nevýhody rozdelenia kódu založeného na trasách

• Potenciál pre duplikáciu: Zdieľané komponenty alebo závislosti môžu byť zahrnuté vo viacerých častiach trás, čo vedie k duplikácii kódu.
• Obmedzenia granularity: Nemusí byť ideálne pre aplikácie s komplexnými komponentmi zdieľanými naprieč viacerými trasami.

Rozdelenie kódu založené na komponentoch

Rozdelenie kódu založené na komponentoch (Component-based code splitting) zahŕňa rozdelenie kódu vašej aplikácie na základe jednotlivých komponentov, namiesto celých trás. To umožňuje granulárnejší prístup k načítaniu kódu, pričom sa načíta iba kód potrebný pre špecifické komponenty, keď sú potrebné.

Implementácia

Rozdelenie kódu založené na komponentoch je komplexnejšie ako rozdelenie podľa trás, ale ponúka väčšiu flexibilitu a optimalizačný potenciál. Opäť, implementácia sa líši v závislosti od frameworku.

React

V Reacte môžete použiť React.lazy a Suspense na lenivé načítanie jednotlivých komponentov v rámci trasy alebo iného komponentu.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>