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

En este ejemplo, los componentes Home, About y Products se cargan de forma diferida. El componente Suspense proporciona una interfaz de respaldo (en este caso, "Loading...") mientras se cargan los componentes.

Escenario de Ejemplo: Imagina una plataforma global de redes sociales. Cuando un usuario inicia sesión por primera vez, es dirigido a su feed de noticias (Home). El código para funcionalidades como perfiles de usuario (About) o el mercado (Products) solo se carga cuando el usuario navega a esas secciones, mejorando el tiempo de carga inicial.

Angular

Angular admite la carga diferida de módulos a través de la configuración de su enrutador. Puedes usar la propiedad loadChildren para especificar un módulo que debe cargarse bajo demanda.

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

En este ejemplo, los módulos HomeModule, AboutModule y ProductsModule se cargan de forma diferida cuando el usuario navega a sus respectivas rutas.

Escenario de Ejemplo: Piensa en el portal web interno de una corporación multinacional. Diferentes departamentos (p. ej., RR.HH., Finanzas, Marketing) tienen sus propios módulos. La división de código asegura que los empleados solo descarguen el código de los departamentos con los que interactúan, agilizando el proceso de carga.

Vue.js

Vue.js admite la carga diferida de componentes utilizando importaciones dinámicas en la configuración de tu enrutador.

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

Aquí, los componentes Home.vue, About.vue y Products.vue se cargan de forma diferida cuando se visitan sus respectivas rutas. El comentario webpackChunkName ayuda a Webpack a crear fragmentos separados para cada componente.

Escenario de Ejemplo: Imagina una plataforma global de educación en línea. Los módulos de los cursos (p. ej., Matemáticas, Historia, Ciencias) pueden cargarse bajo demanda a medida que los estudiantes se inscriben en ellos. Este enfoque minimiza el tamaño de la descarga inicial y optimiza la experiencia del usuario.

Beneficios de la División de Código Basada en Rutas

• Implementación Sencilla: Relativamente fácil de configurar y entender.
• Separación Clara de Responsabilidades: Se alinea bien con la estructura de muchas aplicaciones web.
• Tiempo de Carga Inicial Mejorado: Reducción significativa en la cantidad de código cargado de antemano.

Desventajas de la División de Código Basada en Rutas

• Potencial de Duplicación: Componentes compartidos o dependencias podrían incluirse en múltiples fragmentos de ruta, lo que lleva a la duplicación de código.
• Limitaciones de Granularidad: Puede no ser ideal para aplicaciones con componentes complejos compartidos entre múltiples rutas.

División de Código Basada en Componentes

La división de código basada en componentes implica dividir el código de tu aplicación en función de componentes individuales, en lugar de rutas enteras. Esto permite un enfoque más granular para la carga de código, cargando solo el código requerido para componentes específicos cuando son necesarios.

Implementación

La división de código basada en componentes es más compleja que la división basada en rutas, pero ofrece mayor flexibilidad y potencial de optimización. Nuevamente, la implementación varía según el framework.

React

En React, puedes usar React.lazy y Suspense para cargar de forma diferida componentes individuales dentro de una ruta u otro componente.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>