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 التحميل الكسول للوحدات (modules) من خلال تكوين جهاز التوجيه (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.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 Code Splitting)

يتضمن التقسيم القائم على المكون تقسيم كود تطبيقك بناءً على المكونات الفردية، بدلاً من المسارات بأكملها. يسمح هذا بنهج أكثر دقة لتحميل الكود، حيث يتم تحميل الكود المطلوب فقط لمكونات معينة عند الحاجة إليها.

التنفيذ

التقسيم القائم على المكون أكثر تعقيدًا من التقسيم القائم على المسار، ولكنه يوفر مرونة أكبر وإمكانات تحسين أعلى. مرة أخرى، يختلف التنفيذ اعتمادًا على إطار العمل.

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