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

Dans cet exemple, les composants Home, About et Products sont chargés paresseusement. Le composant Suspense fournit une interface utilisateur de repli (ici, "Loading...") pendant le chargement des composants.

Scénario d'Exemple : Imaginez une plateforme de médias sociaux mondiale. Lorsqu'un utilisateur se connecte pour la première fois, il est dirigé vers son fil d'actualité (Home). Le code pour des fonctionnalités comme les profils utilisateur (About) ou la place de marché (Products) n'est chargé que lorsque l'utilisateur navigue vers ces sections, améliorant ainsi le temps de chargement initial.

Angular

Angular prend en charge le chargement paresseux de modules via la configuration de son routeur. Vous pouvez utiliser la propriété loadChildren pour spécifier un module qui doit être chargé à la demande.

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

Dans cet exemple, les modules HomeModule, AboutModule et ProductsModule sont chargés paresseusement lorsque l'utilisateur navigue vers leurs routes respectives.

Scénario d'Exemple : Pensez au portail web interne d'une société multinationale. Différents départements (par ex., RH, Finance, Marketing) ont leurs propres modules. Le fractionnement de code garantit que les employés ne téléchargent que le code des départements avec lesquels ils interagissent, rationalisant ainsi le processus de chargement.

Vue.js

Vue.js prend en charge le chargement paresseux de composants en utilisant les importations dynamiques dans la configuration de votre routeur.

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

Ici, les composants Home.vue, About.vue et Products.vue sont chargés paresseusement lorsque leurs routes respectives sont visitées. Le commentaire webpackChunkName aide Webpack à créer des morceaux (chunks) distincts pour chaque composant.

Scénario d'Exemple : Imaginez une plateforme mondiale d'éducation en ligne. Les modules de cours (par ex., Mathématiques, Histoire, Sciences) peuvent être chargés à la demande lorsque les étudiants s'y inscrivent. Cette approche minimise la taille du téléchargement initial et optimise l'expérience utilisateur.

Avantages du Fractionnement de Code Basé sur les Routes

• Mise en œuvre Simple : Relativement facile à configurer et à comprendre.
• Séparation Claire des Préoccupations : S'aligne bien avec la structure de nombreuses applications web.
• Temps de Chargement Initial Amélioré : Réduction significative de la quantité de code chargée au départ.

Inconvénients du Fractionnement de Code Basé sur les Routes

• Potentiel de Duplication : Des composants ou des dépendances partagés peuvent être inclus dans plusieurs morceaux de route, entraînant une duplication de code.
• Limitations de Granularité : Peut ne pas être idéal pour les applications avec des composants complexes partagés sur plusieurs routes.

Fractionnement de Code Basé sur les Composants

Le fractionnement de code basé sur les composants consiste à diviser le code de votre application en fonction de composants individuels, plutôt que de routes entières. Cela permet une approche plus granulaire du chargement de code, en ne chargeant que le code requis pour des composants spécifiques lorsqu'ils sont nécessaires.

Mise en œuvre

Le fractionnement de code basé sur les composants est plus complexe que celui basé sur les routes, mais offre une plus grande flexibilité et un potentiel d'optimisation supérieur. Encore une fois, la mise en œuvre varie selon le framework.

React

Dans React, vous pouvez utiliser React.lazy et Suspense pour charger paresseusement des composants individuels au sein d'une route ou d'un autre composant.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>