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 příkladu jsou komponenty Home, About a Products načítány líně. Komponenta Suspense poskytuje záložní UI (v tomto případě „Loading...“), zatímco se komponenty načítají.

Příklad ze života: Představte si globální platformu sociálních médií. Když se uživatel poprvé přihlásí, je přesměrován na svůj news feed (Home). Kód pro funkce jako uživatelské profily (About) nebo tržiště (Products) se načte až tehdy, když uživatel na tyto sekce přejde, což zlepšuje počáteční dobu načítání.

Angular

Angular podporuje líné načítání modulů prostřednictvím své konfigurace routeru. Můžete použít vlastnost loadChildren k určení modulu, který by měl být načten na vyžádání.

            
// 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 příkladu se moduly HomeModule, AboutModule a ProductsModule načítají líně, když uživatel přejde na jejich příslušné routy.

Příklad ze života: Představte si interní webový portál nadnárodní korporace. Různá oddělení (např. HR, finance, marketing) mají své vlastní moduly. Rozdělování kódu zajišťuje, že zaměstnanci stahují pouze kód pro oddělení, se kterými interagují, což zefektivňuje proces načítání.

Vue.js

Vue.js podporuje líné načítání komponent pomocí dynamických importů v konfiguraci vašeho routeru.

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

Zde se komponenty Home.vue, About.vue a Products.vue načítají líně, když jsou navštíveny jejich příslušné routy. Komentář webpackChunkName pomáhá Webpacku vytvořit pro každou komponentu samostatnou část (chunk).

Příklad ze života: Představte si globální online vzdělávací platformu. Moduly kurzů (např. matematika, historie, věda) lze načítat na vyžádání, jak se do nich studenti zapisují. Tento přístup minimalizuje počáteční velikost stahovaných dat a optimalizuje uživatelský zážitek.

Výhody rozdělování kódu podle rout

• Jednoduchá implementace: Relativně snadné nastavení a pochopení.
• Jasné oddělení zodpovědností: Dobře ladí se strukturou mnoha webových aplikací.
• Zkrácení počáteční doby načítání: Významné snížení množství kódu načítaného na začátku.

Nevýhody rozdělování kódu podle rout

• Potenciál pro duplicitu: Sdílené komponenty nebo závislosti mohou být zahrnuty ve více částech pro různé routy, což vede k duplikaci kódu.
• Omezená granularita: Nemusí být ideální pro aplikace s komplexními komponentami sdílenými napříč více routami.

Rozdělování kódu podle komponent (Component-Based)

Rozdělování kódu podle komponent zahrnuje rozdělení kódu vaší aplikace na základě jednotlivých komponent, nikoli celých rout. To umožňuje granulárnější přístup k načítání kódu, kdy se načítá pouze kód potřebný pro konkrétní komponenty, když jsou potřeba.

Implementace

Rozdělování kódu podle komponent je složitější než rozdělování podle rout, ale nabízí větší flexibilitu a potenciál pro optimalizaci. Opět se implementace liší v závislosti na frameworku.

React

V Reactu můžete použít React.lazy a Suspense k línému načítání jednotlivých komponent v rámci routy nebo jiné komponenty.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>