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 به صورت تنبل (lazy) بارگذاری می‌شوند. کامپوننت Suspense یک رابط کاربری جایگزین (در این مورد، "Loading...") را در حین بارگذاری کامپوننت‌ها فراهم می‌کند.

سناریوی مثال: یک پلتفرم رسانه اجتماعی جهانی را تصور کنید. هنگامی که کاربر برای اولین بار وارد می‌شود، به فید خبری خود (Home) هدایت می‌شود. کد مربوط به ویژگی‌هایی مانند پروفایل‌های کاربری (About) یا بازارچه (Products) تنها زمانی بارگذاری می‌شود که کاربر به آن بخش‌ها برود، که این امر زمان بارگذاری اولیه را بهبود می‌بخشد.

Angular

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

            
// 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 کمک می‌کند تا برای هر کامپوننت، قطعه (chunk) جداگانه‌ای ایجاد کند.

سناریوی مثال: یک پلتفرم آموزش آنلاین جهانی را تصور کنید. ماژول‌های درسی (مانند ریاضیات، تاریخ، علوم) می‌توانند بر اساس تقاضا و با ثبت‌نام دانش‌آموزان در آن‌ها بارگذاری شوند. این رویکرد حجم دانلود اولیه را به حداقل می‌رساند و تجربه کاربری را بهینه می‌کند.

مزایای تقسیم کد مبتنی بر مسیر

• پیاده‌سازی ساده: راه‌اندازی و درک آن نسبتاً آسان است.
• جداسازی واضح مسئولیت‌ها: با ساختار بسیاری از اپلیکیشن‌های وب به خوبی هماهنگ است.
• بهبود زمان بارگذاری اولیه: کاهش قابل توجه در مقدار کدی که در ابتدا بارگذاری می‌شود.

معایب تقسیم کد مبتنی بر مسیر

• احتمال تکرار کد: کامپوننت‌ها یا وابستگی‌های مشترک ممکن است در چندین قطعه مسیر گنجانده شوند که منجر به تکرار کد می‌شود.
• محدودیت‌های دانه‌بندی (Granularity): ممکن است برای اپلیکیشن‌هایی با کامپوننت‌های پیچیده که در چندین مسیر به اشتراک گذاشته شده‌اند، ایده‌آل نباشد.

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

تقسیم کد مبتنی بر کامپوننت شامل تقسیم کد اپلیکیشن شما بر اساس کامپوننت‌های جداگانه است، به جای کل مسیرها. این رویکرد امکان یک رویکرد دانه‌بندی شده‌تر (more granular) برای بارگذاری کد را فراهم می‌کند و فقط کد مورد نیاز برای کامپوننت‌های خاص را در زمان نیاز بارگذاری می‌کند.

پیاده‌سازی

تقسیم کد مبتنی بر کامپوننت پیچیده‌تر از تقسیم مبتنی بر مسیر است، اما انعطاف‌پذیری و پتانسیل بهینه‌سازی بیشتری را ارائه می‌دهد. باز هم، پیاده‌سازی بسته به فریم‌ورک متفاوت است.

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