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

U ovom primjeru, komponente Home, About i Products učitavaju se lijeno. Komponenta Suspense pruža rezervno sučelje (u ovom slučaju, "Loading...") dok se komponente učitavaju.

Primjer scenarija: Zamislite globalnu platformu društvenih medija. Kada se korisnik prvi put prijavi, usmjerava se na svoj news feed (Home). Kod za značajke poput korisničkih profila (About) ili tržnice (Products) učitava se tek kada korisnik navigira na te odjeljke, poboljšavajući početno vrijeme učitavanja.

Angular

Angular podržava lijeno učitavanje modula putem svoje konfiguracije usmjerivača (router). Možete koristiti svojstvo loadChildren kako biste specificirali modul koji bi se trebao učitati na zahtjev.

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

U ovom primjeru, HomeModule, AboutModule i ProductsModule učitavaju se lijeno kada korisnik navigira na njihove odgovarajuće rute.

Primjer scenarija: Zamislite interni web portal multinacionalne korporacije. Različiti odjeli (npr. ljudski resursi, financije, marketing) imaju vlastite module. Dijeljenje koda osigurava da zaposlenici preuzimaju samo kod za odjele s kojima stupaju u interakciju, pojednostavljujući proces učitavanja.

Vue.js

Vue.js podržava lijeno učitavanje komponenata pomoću dinamičkih uvoza (dynamic imports) u vašoj konfiguraciji usmjerivača.

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

Ovdje se komponente Home.vue, About.vue i Products.vue učitavaju lijeno kada se posjete njihove odgovarajuće rute. Komentar webpackChunkName pomaže Webpacku da stvori zasebne dijelove za svaku komponentu.

Primjer scenarija: Zamislite globalnu platformu za online obrazovanje. Moduli tečajeva (npr. matematika, povijest, znanost) mogu se učitavati na zahtjev kako se studenti upisuju u njih. Ovaj pristup minimizira početnu veličinu preuzimanja i optimizira korisničko iskustvo.

Prednosti dijeljenja koda temeljenog na rutama

• Jednostavna implementacija: Relativno lako za postaviti i razumjeti.
• Jasno odvajanje odgovornosti (Separation of Concerns): Dobro se usklađuje sa strukturom mnogih web aplikacija.
• Poboljšano početno vrijeme učitavanja: Značajno smanjenje količine koda koji se učitava unaprijed.

Nedostaci dijeljenja koda temeljenog na rutama

• Potencijal za dupliciranje: Dijeljene komponente ili ovisnosti mogu biti uključene u više dijelova ruta, što dovodi do dupliciranja koda.
• Ograničenja granularnosti: Možda nije idealno za aplikacije sa složenim komponentama koje se dijele na više ruta.

Dijeljenje koda temeljeno na komponentama

Dijeljenje koda temeljeno na komponentama uključuje dijeljenje koda vaše aplikacije na temelju pojedinačnih komponenata, umjesto cijelih ruta. To omogućuje granularniji pristup učitavanju koda, učitavajući samo kod potreban za određene komponente kada su one potrebne.

Implementacija

Dijeljenje koda temeljeno na komponentama složenije je od dijeljenja temeljenog na rutama, ali nudi veću fleksibilnost i potencijal za optimizaciju. Opet, implementacija ovisi o okviru.

React

U Reactu možete koristiti React.lazy i Suspense za lijeno učitavanje pojedinačnih komponenata unutar rute ili druge komponente.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>