Καταμερισμός Κώδικα Frontend: Βάσει Διαδρομών και Βάσει Components

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
 return (
 
 Loading...

Σε αυτό το παράδειγμα, τα components Home και About φορτώνονται τεμπέλικα (lazily) χρησιμοποιώντας το React.lazy() και δυναμικές εισαγωγές. Το component Suspense παρέχει ένα εναλλακτικό UI (fallback) κατά τη φόρτωση των components. Το React Router διαχειρίζεται την πλοήγηση και διασφαλίζει ότι το σωστό component αποδίδεται με βάση την τρέχουσα διαδρομή.

Παράδειγμα (Angular)

Στην Angular, ο καταμερισμός κώδικα βάσει διαδρομών επιτυγχάνεται χρησιμοποιώντας lazy-loaded modules.

// 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) }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Εδώ, η ιδιότητα loadChildren στη διαμόρφωση της διαδρομής καθορίζει τη διαδρομή προς το module που πρέπει να φορτωθεί τεμπέλικα. Ο router της Angular θα φορτώσει αυτόματα το module και τα συνδεδεμένα του components μόνο όταν ο χρήστης πλοηγηθεί στην αντίστοιχη διαδρομή.

Παράδειγμα (Vue.js)

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

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
 { path: '/', component: () => import('./components/Home.vue') },
 { path: '/about', component: () => import('./components/About.vue') }
];

const router = new VueRouter({
 routes
});

export default router;

Η επιλογή component στη διαμόρφωση της διαδρομής χρησιμοποιεί μια δυναμική εισαγωγή για να φορτώσει το component ασύγχρονα. Το Vue Router θα διαχειριστεί τη φόρτωση και την απόδοση του component όταν γίνει πρόσβαση στη διαδρομή.

Πλεονεκτήματα του Καταμερισμού Κώδικα Βάσει Διαδρομών

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

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

• Μπορεί να μην είναι αρκετά αναλυτικό: Ο καταμερισμός κώδικα βάσει διαδρομών μπορεί να μην είναι επαρκής για εφαρμογές με σύνθετα components που μοιράζονται σε πολλές διαδρομές.
• Ο αρχικός χρόνος φόρτωσης μπορεί να είναι ακόμα υψηλός: Εάν μια διαδρομή περιέχει πολλές εξαρτήσεις, ο αρχικός χρόνος φόρτωσης για αυτή τη διαδρομή μπορεί να είναι ακόμα σημαντικός.

Καταμερισμός Κώδικα Βάσει Components

Ο καταμερισμός κώδικα βάσει components (component-based) πηγαίνει τον καταμερισμό κώδικα ένα βήμα παραπέρα, διαιρώντας τον κώδικα της εφαρμογής σε μικρότερα κομμάτια με βάση μεμονωμένα components. Αυτή η προσέγγιση επιτρέπει πιο αναλυτικό έλεγχο στη φόρτωση του κώδικα και μπορεί να είναι ιδιαίτερα αποτελεσματική για εφαρμογές με σύνθετα UI και επαναχρησιμοποιήσιμα components.

Υλοποίηση

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

1. Τεμπέλικη φόρτωση components: Χρησιμοποιήστε δυναμικές εισαγωγές για να φορτώσετε components μόνο όταν χρειάζονται, όπως όταν αποδίδονται για πρώτη φορά ή όταν συμβαίνει ένα συγκεκριμένο γεγονός.
2. Υπό συνθήκη απόδοση (Conditional rendering): Αποδώστε τα components υπό συνθήκες με βάση την αλληλεπίδραση του χρήστη ή άλλους παράγοντες, φορτώνοντας τον κώδικα του component μόνο όταν πληρούται η συνθήκη.
3. Intersection Observer API: Χρησιμοποιήστε το Intersection Observer API για να ανιχνεύσετε πότε ένα component είναι ορατό στο viewport και να φορτώσετε τον κώδικα του ανάλογα. Αυτό είναι ιδιαίτερα χρήσιμο για τη φόρτωση components που αρχικά βρίσκονται εκτός οθόνης.

Παράδειγμα (React)

import React, { Suspense, lazy } from 'react';

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

function App() {
 return (
 

 Loading...
}>