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

In diesem Beispiel werden die Komponenten Home, About und Products verzögert geladen (lazy loaded). Die Suspense-Komponente stellt eine Fallback-Benutzeroberfläche (in diesem Fall „Lade...“) bereit, während die Komponenten geladen werden.

Beispielszenario: Stellen Sie sich eine globale Social-Media-Plattform vor. Wenn sich ein Benutzer zum ersten Mal anmeldet, wird er zu seinem Newsfeed (Home) geleitet. Code für Funktionen wie Benutzerprofile (About) oder den Marktplatz (Products) wird erst geladen, wenn der Benutzer zu diesen Abschnitten navigiert, was die anfängliche Ladezeit verbessert.

Angular

Angular unterstützt das Lazy Loading von Modulen über seine Router-Konfiguration. Sie können die Eigenschaft loadChildren verwenden, um ein Modul anzugeben, das bei Bedarf geladen werden soll.

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

In diesem Beispiel werden das HomeModule, AboutModule und ProductsModule verzögert geladen, wenn der Benutzer zu den entsprechenden Routen navigiert.

Beispielszenario: Denken Sie an das interne Webportal eines multinationalen Konzerns. Verschiedene Abteilungen (z. B. Personal, Finanzen, Marketing) haben ihre eigenen Module. Code Splitting stellt sicher, dass Mitarbeiter nur den Code für die Abteilungen herunterladen, mit denen sie interagieren, was den Ladevorgang optimiert.

Vue.js

Vue.js unterstützt das Lazy Loading von Komponenten durch dynamische Importe in Ihrer Router-Konfiguration.

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

Hier werden die Komponenten Home.vue, About.vue und Products.vue verzögert geladen, wenn ihre jeweiligen Routen besucht werden. Der webpackChunkName-Kommentar hilft Webpack, separate Chunks für jede Komponente zu erstellen.

Beispielszenario: Stellen Sie sich eine globale Online-Bildungsplattform vor. Kursmodule (z. B. Mathematik, Geschichte, Naturwissenschaften) können bei Bedarf geladen werden, wenn sich Studierende dafür einschreiben. Dieser Ansatz minimiert die anfängliche Downloadgröße und optimiert die Benutzererfahrung.

Vorteile des routenbasierten Code Splittings

• Einfache Implementierung: Relativ einfach einzurichten und zu verstehen.
• Klare Trennung der Belange (Separation of Concerns): Passt gut zur Struktur vieler Webanwendungen.
• Verbesserte anfängliche Ladezeit: Signifikante Reduzierung der im Voraus geladenen Codemenge.

Nachteile des routenbasierten Code Splittings

• Potenzial für Duplizierung: Geteilte Komponenten oder Abhängigkeiten könnten in mehreren Routen-Chunks enthalten sein, was zu Codeduplizierung führt.
• Eingeschränkte Granularität: Möglicherweise nicht ideal für Anwendungen mit komplexen Komponenten, die über mehrere Routen hinweg geteilt werden.

Komponenten-basiertes Code Splitting

Komponenten-basiertes Code Splitting beinhaltet das Aufteilen des Codes Ihrer Anwendung basierend auf einzelnen Komponenten anstatt auf ganzen Routen. Dies ermöglicht einen granulareren Ansatz beim Laden von Code, bei dem nur der Code für bestimmte Komponenten geladen wird, wenn sie benötigt werden.

Implementierung

Komponenten-basiertes Code Splitting ist komplexer als routenbasiertes Splitting, bietet aber mehr Flexibilität und Optimierungspotenzial. Auch hier variiert die Implementierung je nach Framework.

React

In React können Sie React.lazy und Suspense verwenden, um einzelne Komponenten innerhalb einer Route oder einer anderen Komponente verzögert zu laden (lazy load).

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Willkommen auf meiner Seite
      Lade Komponente...
}>