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

Ebben a példában a Home, About és Products komponensek lustán töltődnek be. A Suspense komponens egy tartalék felhasználói felületet biztosít (ebben az esetben a "Loading..." szöveget), amíg a komponensek betöltődnek.

Példa forgatókönyv: Képzeljünk el egy globális közösségi média platformot. Amikor egy felhasználó először bejelentkezik, a hírfolyamára (Home) irányítják. Az olyan funkciók kódja, mint a felhasználói profilok (About) vagy a piactér (Products), csak akkor töltődik be, amikor a felhasználó ezekre a részekre navigál, javítva a kezdeti betöltési időt.

Angular

Az Angular támogatja a modulok lusta betöltését a router konfigurációján keresztül. A loadChildren tulajdonsággal adhatja meg azt a modult, amelyet igény szerint kell betölteni.

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

Ebben a példában a HomeModule, AboutModule és ProductsModule lustán töltődik be, amikor a felhasználó a megfelelő útvonalakra navigál.

Példa forgatókönyv: Gondoljunk egy multinacionális vállalat belső webportáljára. A különböző részlegeknek (pl. HR, Pénzügy, Marketing) saját moduljaik vannak. A kód felosztása biztosítja, hogy az alkalmazottak csak azoknak a részlegeknek a kódját töltsék le, amelyekkel interakcióba lépnek, egyszerűsítve a betöltési folyamatot.

Vue.js

A Vue.js támogatja a komponensek lusta betöltését dinamikus importok segítségével a router konfigurációjában.

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

Itt a Home.vue, About.vue és Products.vue komponensek lustán töltődnek be, amikor a megfelelő útvonalakat meglátogatják. A webpackChunkName komment segít a Webpacknek különálló darabokat létrehozni minden komponenshez.

Példa forgatókönyv: Képzeljünk el egy globális online oktatási platformot. A kurzusmodulok (pl. Matematika, Történelem, Tudomány) igény szerint tölthetők be, amint a diákok beiratkoznak rájuk. Ez a megközelítés minimalizálja a kezdeti letöltési méretet és optimalizálja a felhasználói élményt.

Az útvonal-alapú kód felosztás előnyei

• Egyszerű implementáció: Viszonylag könnyű beállítani és megérteni.
• Tiszta felelősségi körök szétválasztása: Jól illeszkedik sok webalkalmazás struktúrájához.
• Jobb kezdeti betöltési idő: Jelentősen csökken a kezdetben betöltött kód mennyisége.

Az útvonal-alapú kód felosztás hátrányai

• Lehetséges duplikáció: A megosztott komponensek vagy függőségek több útvonal-darabban is szerepelhetnek, ami kódduplikációhoz vezethet.
• Granularitási korlátok: Lehet, hogy nem ideális olyan alkalmazásokhoz, amelyekben összetett, több útvonalon megosztott komponensek vannak.

Komponens-alapú kód felosztás

A komponens-alapú kód felosztás azt jelenti, hogy az alkalmazás kódját egyes komponensek alapján osztjuk fel, nem pedig teljes útvonalak alapján. Ez egy részletesebb megközelítést tesz lehetővé a kód betöltésében, csak az adott komponensekhez szükséges kódot töltve be, amikor szükség van rájuk.

Implementáció

A komponens-alapú kód felosztás bonyolultabb, mint az útvonal-alapú, de nagyobb rugalmasságot és optimalizálási lehetőséget kínál. Itt is, a megvalósítás a keretrendszertől függ.

React

A React-ben a React.lazy és Suspense segítségével lustán tölthet be egyes komponenseket egy útvonalon vagy más komponensen belül.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>