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 φορτώνονται τεμπέλικα. Το στοιχείο Suspense παρέχει ένα εφεδρικό UI (σε αυτή την περίπτωση, "Loading...") ενώ τα στοιχεία φορτώνονται.

Παράδειγμα Σεναρίου: Φανταστείτε μια παγκόσμια πλατφόρμα κοινωνικής δικτύωσης. Όταν ένας χρήστης συνδέεται για πρώτη φορά, κατευθύνεται στη ροή ειδήσεων (Home). Ο κώδικας για λειτουργίες όπως τα προφίλ χρηστών (About) ή η αγορά (Products) φορτώνεται μόνο όταν ο χρήστης πλοηγείται σε αυτές τις ενότητες, βελτιώνοντας τον αρχικό χρόνο φόρτωσης.

Angular

Το Angular υποστηρίζει την τεμπέλικη φόρτωση ενοτήτων (modules) μέσω της διαμόρφωσης του router του. Μπορείτε να χρησιμοποιήσετε την ιδιότητα 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 φορτώνονται τεμπέλικα όταν ο χρήστης πλοηγείται στις αντίστοιχες διαδρομές τους.

Παράδειγμα Σεναρίου: Σκεφτείτε την εσωτερική διαδικτυακή πύλη μιας πολυεθνικής εταιρείας. Διαφορετικά τμήματα (π.χ. HR, Οικονομικά, Μάρκετινγκ) έχουν τις δικές τους ενότητες. Ο διαχωρισμός κώδικα διασφαλίζει ότι οι υπάλληλοι κατεβάζουν μόνο τον κώδικα για τα τμήματα με τα οποία αλληλεπιδρούν, απλοποιώντας τη διαδικασία φόρτωσης.

Vue.js

Το Vue.js υποστηρίζει την τεμπέλικη φόρτωση στοιχείων χρησιμοποιώντας δυναμικές εισαγωγές (dynamic imports) στη διαμόρφωση του router σας.

            
// 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 να δημιουργήσει ξεχωριστά κομμάτια για κάθε στοιχείο.

Παράδειγμα Σεναρίου: Οραματιστείτε μια παγκόσμια πλατφόρμα διαδικτυακής εκπαίδευσης. Οι ενότητες μαθημάτων (π.χ. Μαθηματικά, Ιστορία, Επιστήμη) μπορούν να φορτωθούν κατ' απαίτηση καθώς οι μαθητές εγγράφονται σε αυτές. Αυτή η προσέγγιση ελαχιστοποιεί το αρχικό μέγεθος λήψης και βελτιστοποιεί την εμπειρία του χρήστη.

Οφέλη του Διαχωρισμού Κώδικα Βάσει Διαδρομής

• Απλή Υλοποίηση: Σχετικά εύκολο στη ρύθμιση και την κατανόηση.
• Σαφής Διαχωρισμός Αρμοδιοτήτων (Separation of Concerns): Ευθυγραμμίζεται καλά με τη δομή πολλών εφαρμογών ιστού.
• Βελτιωμένος Αρχικός Χρόνος Φόρτωσης: Σημαντική μείωση στην ποσότητα του κώδικα που φορτώνεται εκ των προτέρων.

Μειονεκτήματα του Διαχωρισμού Κώδικα Βάσει Διαδρομής

• Πιθανότητα Διπλοτύπων: Κοινά στοιχεία ή εξαρτήσεις ενδέχεται να περιλαμβάνονται σε πολλαπλά κομμάτια διαδρομών, οδηγώντας σε διπλότυπο κώδικα.
• Περιορισμοί στην Κοκκομετρία (Granularity): Μπορεί να μην είναι ιδανικό για εφαρμογές με πολύπλοκα στοιχεία που μοιράζονται σε πολλαπλές διαδρομές.

Διαχωρισμός Κώδικα Βάσει Στοιχείου (Component-Based Code Splitting)

Ο διαχωρισμός κώδικα βάσει στοιχείου περιλαμβάνει τον διαχωρισμό του κώδικα της εφαρμογής σας με βάση μεμονωμένα στοιχεία, αντί για ολόκληρες διαδρομές. Αυτό επιτρέπει μια πιο κοκκομετρική προσέγγιση στη φόρτωση κώδικα, φορτώνοντας μόνο τον κώδικα που απαιτείται για συγκεκριμένα στοιχεία όταν αυτά χρειάζονται.

Υλοποίηση

Ο διαχωρισμός κώδικα βάσει στοιχείου είναι πιο πολύπλοκος από τον διαχωρισμό βάσει διαδρομής, αλλά προσφέρει μεγαλύτερη ευελιξία και δυνατότητες βελτιστοποίησης. Και πάλι, η υλοποίηση ποικίλλει ανάλογα με το framework.

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