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

W tym przykładzie komponenty Home, About i Products są ładowane leniwie. Komponent Suspense dostarcza interfejs zastępczy (w tym przypadku „Loading...”), podczas gdy komponenty są ładowane.

Przykładowy scenariusz: Wyobraź sobie globalną platformę społecznościową. Gdy użytkownik loguje się po raz pierwszy, jest przekierowywany do swojego kanału informacyjnego (Home). Kod dla funkcji takich jak profile użytkowników (About) czy marketplace (Products) jest ładowany tylko wtedy, gdy użytkownik przechodzi do tych sekcji, co skraca początkowy czas ładowania.

Angular

Angular obsługuje leniwe ładowanie modułów poprzez konfigurację routera. Można użyć właściwości loadChildren, aby określić moduł, który powinien być ładowany na żądanie.

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

W tym przykładzie HomeModule, AboutModule i ProductsModule są ładowane leniwie, gdy użytkownik przechodzi do odpowiednich tras.

Przykładowy scenariusz: Pomyśl o wewnętrznym portalu internetowym międzynarodowej korporacji. Różne działy (np. HR, Finanse, Marketing) mają swoje własne moduły. Dzielenie kodu zapewnia, że pracownicy pobierają kod tylko dla tych działów, z którymi wchodzą w interakcję, usprawniając proces ładowania.

Vue.js

Vue.js obsługuje leniwe ładowanie komponentów za pomocą dynamicznych importów w konfiguracji 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
              
            
          

W tym przypadku komponenty Home.vue, About.vue i Products.vue są ładowane leniwie, gdy odwiedzane są ich odpowiednie trasy. Komentarz webpackChunkName pomaga Webpackowi tworzyć oddzielne fragmenty dla każdego komponentu.

Przykładowy scenariusz: Wyobraź sobie globalną platformę edukacyjną online. Moduły kursów (np. Matematyka, Historia, Nauki ścisłe) mogą być ładowane na żądanie, gdy studenci zapisują się na nie. Takie podejście minimalizuje początkowy rozmiar pobieranych danych i optymalizuje doświadczenie użytkownika.

Zalety dzielenia kodu opartego na trasach

• Prosta implementacja: Stosunkowo łatwe do skonfigurowania i zrozumienia.
• Jasne rozdzielenie odpowiedzialności: Dobrze współgra ze strukturą wielu aplikacji internetowych.
• Skrócony początkowy czas ładowania: Znacząca redukcja ilości kodu ładowanego z góry.

Wady dzielenia kodu opartego na trasach

• Potencjalna duplikacja: Współdzielone komponenty lub zależności mogą być zawarte w wielu fragmentach kodu dla różnych tras, co prowadzi do duplikacji kodu.
• Ograniczenia granularności: Może nie być idealne dla aplikacji ze złożonymi komponentami współdzielonymi przez wiele tras.

Dzielenie kodu oparte na komponentach (Component-Based)

Dzielenie kodu oparte na komponentach polega na dzieleniu kodu aplikacji w oparciu o poszczególne komponenty, a nie całe trasy. Pozwala to na bardziej granularne podejście do ładowania kodu, ładując tylko ten kod, który jest wymagany dla konkretnych komponentów, gdy są one potrzebne.

Implementacja

Dzielenie kodu oparte na komponentach jest bardziej złożone niż dzielenie oparte na trasach, ale oferuje większą elastyczność i potencjał optymalizacyjny. Ponownie, implementacja różni się w zależności od frameworka.

React

W React można użyć React.lazy i Suspense do leniwego ładowania poszczególnych komponentów w ramach trasy lub innego komponentu.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>