تقسيم الكود في الواجهة الأمامية: النهج القائم على المسار والنهج القائم على المكونات

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
 return (
 
 Loading...

في هذا المثال، يتم تحميل مكوني Home و About بشكل كسول باستخدام React.lazy() والاستيراد الديناميكي. يوفر مكون Suspense واجهة مستخدم احتياطية أثناء تحميل المكونات. يتعامل React Router مع التنقل ويضمن عرض المكون الصحيح بناءً على المسار الحالي.

مثال (Angular)

في Angular، يتم تحقيق تقسيم الكود القائم على المسار باستخدام الوحدات المحملة بشكل كسول.

// 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) }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

هنا، تحدد خاصية loadChildren في تكوين المسار المسار إلى الوحدة التي يجب تحميلها بشكل كسول. سيقوم موجه Angular تلقائيًا بتحميل الوحدة والمكونات المرتبطة بها فقط عندما ينتقل المستخدم إلى المسار المقابل.

مثال (Vue.js)

يدعم Vue.js أيضًا تقسيم الكود القائم على المسار باستخدام الاستيراد الديناميكي في تكوين الموجه.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
 { path: '/', component: () => import('./components/Home.vue') },
 { path: '/about', component: () => import('./components/About.vue') }
];

const router = new VueRouter({
 routes
});

export default router;

يستخدم خيار component في تكوين المسار استيرادًا ديناميكيًا لتحميل المكون بشكل غير متزامن. سيتولى Vue Router تحميل وعرض المكون عند الوصول إلى المسار.

فوائد تقسيم الكود القائم على المسار

• سهل التنفيذ: تقسيم الكود القائم على المسار سهل التنفيذ نسبيًا، خاصة مع الدعم المقدم من أطر العمل الحديثة.
• فصل واضح للمسؤوليات: يمثل كل مسار قسمًا متميزًا من التطبيق، مما يسهل فهم الكود وتبعياته.
• فعال للتطبيقات الكبيرة: يعد تقسيم الكود القائم على المسار مفيدًا بشكل خاص للتطبيقات الكبيرة التي تحتوي على العديد من المسارات والميزات.

عيوب تقسيم الكود القائم على المسار

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

تقسيم الكود القائم على المكونات

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

التنفيذ

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

1. التحميل الكسول للمكونات: استخدم الاستيراد الديناميكي لتحميل المكونات فقط عند الحاجة إليها، مثل عند عرضها لأول مرة أو عند وقوع حدث معين.
2. العرض الشرطي: اعرض المكونات بشكل شرطي بناءً على تفاعل المستخدم أو عوامل أخرى، مع تحميل كود المكون فقط عند استيفاء الشرط.
3. Intersection Observer API: استخدم Intersection Observer API لاكتشاف متى يكون المكون مرئيًا في منفذ العرض وتحميل الكود الخاص به وفقًا لذلك. هذا مفيد بشكل خاص لتحميل المكونات التي تكون خارج الشاشة في البداية.

مثال (React)

import React, { Suspense, lazy } from 'react';

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

function App() {
 return (
 

 Loading...
}>