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

בדוגמה זו, הרכיבים Home, About ו-Products נטענים באופן עצל. רכיב ה-Suspense מספק ממשק משתמש חלופי (במקרה זה, "Loading...") בזמן שהרכיבים נטענים.

תרחיש לדוגמה: דמיינו פלטפורמת מדיה חברתית גלובלית. כאשר משתמש נכנס לראשונה, הוא מופנה לפיד החדשות שלו (Home). קוד עבור תכונות כמו פרופילי משתמשים (About) או שוק (Products) נטען רק כאשר המשתמש מנווט למדורים אלה, מה שמשפר את זמן הטעינה הראשוני.

Angular

Angular תומכת בטעינה עצלה של מודולים דרך תצורת ה-router שלה. ניתן להשתמש במאפיין loadChildren כדי לציין מודול שיש לטעון לפי דרישה.

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

בדוגמה זו, המודולים HomeModule, AboutModule ו-ProductsModule נטענים באופן עצל כאשר המשתמש מנווט לנתיבים המתאימים להם.

תרחיש לדוגמה: חשבו על פורטל אינטרנט פנימי של תאגיד רב-לאומי. למחלקות שונות (למשל, משאבי אנוש, כספים, שיווק) יש מודולים משלהן. פיצול קוד מבטיח שעובדים יורידו רק את הקוד של המחלקות שאיתן הם מקיימים אינטראקציה, ובכך מייעל את תהליך הטעינה.

Vue.js

Vue.js תומכת בטעינה עצלה של רכיבים באמצעות ייבוא דינמי (dynamic imports) בתצורת ה-router שלכם.

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

כאן, הרכיבים Home.vue, About.vue ו-Products.vue נטענים באופן עצל כאשר מבקרים בנתיבים המתאימים להם. ההערה webpackChunkName מסייעת ל-Webpack ליצור חבילות נפרדות עבור כל רכיב.

תרחיש לדוגמה: דמיינו פלטפורמת חינוך מקוונת גלובלית. מודולי קורסים (למשל, מתמטיקה, היסטוריה, מדע) יכולים להיטען לפי דרישה כאשר סטודנטים נרשמים אליהם. גישה זו ממזערת את גודל ההורדה הראשוני ומייעלת את חווית המשתמש.

יתרונות של פיצול קוד מבוסס ניתוב

• יישום פשוט: קל יחסית להגדרה ולהבנה.
• הפרדת תחומי אחריות ברורה: מתיישר היטב עם המבנה של אפליקציות ווב רבות.
• זמן טעינה ראשוני משופר: הפחתה משמעותית בכמות הקוד הנטען מראש.

חסרונות של פיצול קוד מבוסס ניתוב

• פוטנציאל לשכפול קוד: רכיבים משותפים או תלויות עשויים להיכלל במספר חבילות של נתיבים, מה שמוביל לשכפול קוד.
• מגבלות גרנולריות: ייתכן שלא יהיה אידיאלי עבור אפליקציות עם רכיבים מורכבים המשותפים בין מספר נתיבים.

פיצול קוד מבוסס רכיב (Component-Based)

פיצול קוד מבוסס רכיב כרוך בחלוקת הקוד של האפליקציה שלכם על בסיס רכיבים בודדים, ולא על בסיס נתיבים שלמים. הדבר מאפשר גישה גרנולרית יותר לטעינת קוד, וטעינת הקוד הנדרש לרכיבים ספציפיים רק כאשר יש בהם צורך.

יישום

פיצול קוד מבוסס רכיב הוא מורכב יותר מפיצול מבוסס ניתוב, אך מציע גמישות רבה יותר ופוטנציאל אופטימיזציה גבוה יותר. גם כאן, היישום משתנה בהתאם לסביבת הפיתוח.

React

ב-React, ניתן להשתמש ב-React.lazy וב-Suspense כדי לטעון באופן עצל רכיבים בודדים בתוך נתיב או רכיב אחר.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>