تقسیم کد فرانت‌اند: مبتنی بر مسیر و مبتنی بر کامپوننت

// 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 ناوبری را مدیریت کرده و اطمینان حاصل می‌کند که کامپوننت صحیح بر اساس مسیر فعلی رندر می‌شود.

مثال (انگولار)

در انگولار، تقسیم کد مبتنی بر مسیر با استفاده از ماژول‌های بارگذاری تنبل (lazy-loaded modules) انجام می‌شود.

// 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 در پیکربندی مسیر، مسیر ماژولی را مشخص می‌کند که باید به صورت تنبل بارگذاری شود. روتر انگولار به طور خودکار ماژول و کامپوننت‌های مرتبط با آن را تنها زمانی که کاربر به مسیر مربوطه هدایت شود، بارگذاری خواهد کرد.

مثال (ویو.جی‌اس)

ویو.جی‌اس نیز از تقسیم کد مبتنی بر مسیر با استفاده از واردات دینامیک در پیکربندی روتر پشتیبانی می‌کند.

// 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. API مشاهده‌گر تقاطع (Intersection Observer API): از Intersection Observer API برای تشخیص زمانی که یک کامپوننت در دید (viewport) قابل مشاهده است استفاده کنید و کد آن را بر اساس آن بارگذاری کنید. این امر به ویژه برای بارگذاری کامپوننت‌هایی که در ابتدا خارج از صفحه هستند، مفید است.

مثال (ری‌اکت)

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

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

function App() {
 return (
 

 Loading...
}>