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

Neste exemplo, os componentes Home, About e Products são carregados de forma preguiçosa. O componente Suspense fornece uma UI de fallback (neste caso, "Loading...") enquanto os componentes estão sendo carregados.

Cenário de Exemplo: Imagine uma plataforma de mídia social global. Quando um usuário faz login pela primeira vez, ele é direcionado para o seu feed de notícias (Home). O código para funcionalidades como perfis de usuário (About) ou marketplace (Products) só é carregado quando o usuário navega para essas seções, melhorando o tempo de carregamento inicial.

Angular

O Angular suporta o lazy loading de módulos através da configuração de seu roteador. Você pode usar a propriedade loadChildren para especificar um módulo que deve ser carregado sob 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
              
            
          

Neste exemplo, o HomeModule, AboutModule e ProductsModule são carregados de forma preguiçosa quando o usuário navega para suas respectivas rotas.

Cenário de Exemplo: Pense no portal web interno de uma corporação multinacional. Diferentes departamentos (ex: RH, Finanças, Marketing) têm seus próprios módulos. O code splitting garante que os funcionários baixem apenas o código dos departamentos com os quais interagem, otimizando o processo de carregamento.

Vue.js

O Vue.js suporta o lazy loading de componentes usando importações dinâmicas na configuração do seu roteador.

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

Aqui, os componentes Home.vue, About.vue e Products.vue são carregados de forma preguiçosa quando suas respectivas rotas são visitadas. O comentário webpackChunkName ajuda o Webpack a criar pacotes separados para cada componente.

Cenário de Exemplo: Visualize uma plataforma global de educação online. Módulos de cursos (ex: Matemática, História, Ciências) podem ser carregados sob demanda à medida que os alunos se inscrevem neles. Essa abordagem minimiza o tamanho do download inicial e otimiza a experiência do usuário.

Benefícios do Code Splitting Baseado em Rotas

• Implementação Simples: Relativamente fácil de configurar e entender.
• Separação Clara de Responsabilidades: Alinha-se bem com a estrutura de muitas aplicações web.
• Tempo de Carregamento Inicial Aprimorado: Redução significativa na quantidade de código carregado de início.

Desvantagens do Code Splitting Baseado em Rotas

• Potencial para Duplicação: Componentes ou dependências compartilhadas podem ser incluídos em múltiplos pacotes de rota, levando à duplicação de código.
• Limitações de Granularidade: Pode não ser ideal para aplicações com componentes complexos compartilhados entre múltiplas rotas.

Code Splitting Baseado em Componentes

O code splitting baseado em componentes envolve a divisão do código da sua aplicação com base em componentes individuais, em vez de rotas inteiras. Isso permite uma abordagem mais granular para o carregamento de código, carregando apenas o código necessário para componentes específicos quando eles são necessários.

Implementação

O code splitting baseado em componentes é mais complexo do que a divisão baseada em rotas, mas oferece maior flexibilidade e potencial de otimização. Novamente, a implementação varia dependendo do framework.

React

No React, você pode usar React.lazy e Suspense para carregar de forma preguiçosa componentes individuais dentro de uma rota ou outro componente.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>