Fractionnement de code dans les applications Web modernes: un guide pour React et Vue

La segmentation du code est cruciale pour les performances Web modernes et peut améliorer considérablement la vitesse de chargement et l'expérience utilisateur. 1. Utilisez React.lazy et suspense pour implémenter la segmentation de code de niveau de routage dans React, les composants de chargement uniquement en cas de besoin et afficher l'état de charge via le suspense; 2. Utilisez DefiSeSyncComponent ou Dynamic Import () pour implémenter le chargement des composants asynchrones dans VUE, prenant en charge la gestion des erreurs et le chargement retardé; 3. La segmentation au niveau de l'itinéraire est le point de départ le plus efficace, car il est cohérent avec la navigation utilisateur et prend automatiquement en charge la chaîne d'outils; 4. Extraire les dépendances partagées via WebPack ou Vite Configuration pour éviter le chargement répété de bibliothèques tierces; 5. Évitez la segmentation excessive, l'utilisation rationnelle du préchargement, le volume du package du moniteur et gérez élégamment l'état de charge pour obtenir des performances optimales. L'implémentation correcte de la segmentation du code peut rendre les applications React ou Vue plus réactives.

Le fractionnement du code n'est plus agréable à avoir - il est essentiel pour les performances Web modernes. À mesure que les applications React et Vue se développent en complexité, le chargement de tout dès le départ entraîne des charges initiales ralenties et une mauvaise expérience utilisateur. Le fractionnement du code aide en cassant votre pack JavaScript en morceaux plus petits, en chargeant uniquement ce qui est nécessaire lorsqu'il est nécessaire.

Voici comment implémenter une division de code efficace dans les applications React et Vue.

Pourquoi le fractionnement du code est important

Les grands faisceaux signifie des temps de téléchargement, d'analyse et d'exécution plus longs - en particulier sur les réseaux mobiles ou lents. Le fractionnement du code s'améliore:

• Temps de chargement initial : les utilisateurs voient le contenu plus rapidement.
• Utilisation de la mémoire : code moins inutilisé en mémoire.
• Efficacité de mise en cache : les morceaux plus petits et plus ciblés peuvent être mis en cache indépendamment.

L'idée clé: diviser à des limites naturelles , comme les itinéraires, les composants ou les modules de fonction.

Code Spliting in React avec React.lazy et Suspense

React fournit une prise en charge intégrée pour les composants de chargement paresseux en utilisant React.lazy et Suspense .

 import {paresseux, suspense} de 'react';
import {BrowserRouter comme routeur, routeurs, route} à partir de «react-router-doM»;

const homepage = Lazy (() => import ('./ pages / page d'accueil'));
const aboutpage = lazy (() => import ('./ pages / peuple'));

Function App () {
  Retour (
    <Routeur>
      <Suspense Fallback = {<div> Chargement ... </div>}>
        <Routes>
          <Routier path = "/" élément = {<homepage />} />
          <Route Path = "/ About" Element = {<AboutPage />} />
        </ routes>
      </suspense>
    </bouter>
  ));
}

Points clés:

• React.lazy fonctionne uniquement avec les exportations par défaut.
• Suspense vous permet de montrer un secours pendant que le composant se charge.
• Mieux utilisé au niveau de l'itinéraire - idéal pour la division par page.

? Remarque: Pour le rendu côté serveur (SSR), vous aurez besoin d'outillage supplémentaire (comme Next.js ou chargeurs WebPack personnalisés) car React.lazy est uniquement côté client.

Vous pouvez également diviser les composants non routés:

 const commentairesection = lazy (() => import ('./ Composants / commentaire'));

Mais faites cela uniquement pour les composants lourds et inférieurs.

Fractionnement de code en Vue avec des composants asynchrones

Vue gère les composants asynchronisés nativement à l'aide de defineAsyncComponent (VUE 3) ou Dynamic import() .

 import {deficeSyncComponent} de 'vue';
import {Createrouter} de 'Vue-Router';

const homepage = () => import ('../ vues / homepage.vue');
const aboutpage = defiseSyncComponent (() =>
  importer ('../ vues / ovrofpage.vue')
));

constants constants = [
  {path: '/', composant: page d'accueil},
  {Path: '/ About', Composant: Aboutpage}
]]

const Router = Createrouter ({History: CreateWeBhistory (), Routes});

Différences:

• L'utilisation import() directement dans les itinéraires permet automatiquement la division du code (Vue Router Vite ou WebPack).
• defineAsyncComponent donne plus de contrôle (par exemple, la gestion des erreurs, les retards de chargement):

 const asyncComponent = DefiaSyncComponent ({{
  Loader: () => import ('./ HeavyComponent.vue'),
  retard: 200,
  errorComponent: errorComponent,
  Timeout: 5000
});

Ceci est utile pour les composants non routés qui sont coûteux à charger.

Fractionnement basé sur l'itinéraire: les fruits les plus bas

React et Vue bénéficient le plus de la division au niveau de l'itinéraire parce que:

• Il s'aligne sur la navigation utilisateur.
• Des outils comme React Router et Vue Router s'intègrent parfaitement aux bundlers.
• Chaque itinéraire devient automatiquement un morceau séparé lors de l'utilisation de Dynamic import() .

WebPack, Vite et d'autres bundlers détectent import() et divisé en conséquence - pas de configuration supplémentaire nécessaire dans la plupart des cas.

✅ CONSEIL PRO: Nommez vos morceaux pour un meilleur débogage:

 const aboutpage = lazy (() => import (/ * webpackchunkname: "environ-page" * / './pages/aboutpage'));

En Vue avec Vite, utilisez:

 () => import ('../ vues / about.vue'). puis (m => M.Default)
// VITE gère automatiquement le nom de la plupart des cas dans la plupart des cas

Avancé: division des bibliothèques et code partagé

Même avec le fractionnement des itinéraires, vous pourriez finir par dupliquer les bibliothèques (par exemple, Lodash, Date-FN). Utilisez votre bundler pour extraire les dépendances partagées.

Dans WebPack:

 // webpack.config.js
Optimisation: {
  Splitchunks: {
    morceaux: «tout»,
    Cachegroups: {
      fournisseur: {
        test: / [\\ /] node_modules [\\ /] /,
        Nom: «vendeurs»,
        morceaux: «tout»,
      },
    },
  },
}

Cela crée un vendors.chunk.js séparé.chunk.js pour les packages tiers.

Inviter:

Vite divise automatiquement le code du fournisseur. Vous pouvez le personnaliser:

 // Vite.config.ts
Exporter de défaut DefiConfig ({
  construire: {
    rollupoptions: {
      sortir: {
        manuels: {
          «Vue-Vendor»: [«Vue», «Vue-Router»],
          'ui-lib': ['élément-plus'],
        }
      }
    }
  }
})

Cela vous donne un contrôle à grain fin sur ce qui va où.

Gotchas et meilleures pratiques

• Ne pas sur-climatiser : trop de petits morceaux augmentent les frais généraux HTTP.
• Évitez tout le chargement paresseux : divisez uniquement les grands composants rarement utilisés.
• Moniteur Taille du faisceau : utilisez des outils tels que WebPack Bundle Analyzer ou Vite's rollup-plugin-visualizer .
• Préload Critical Chunks : Utilisez <link rel="modulepreload"> (Vite) ou magic comments de WebPack:

   import (/ * webpackpreload: true * / './criticalcomponent')

• Gérer les états de chargement gracieusement : utilisez des squelettes ou des filateurs pour améliorer les performances perçues.

---

La fractionnement du code, une fois bien fait, fait que votre application React ou Vue est rapide et réactive. Commencez par la division basée sur les itinéraires, puis optimisez le code partagé et les composants lourds. Les outils sont intégrés - il vous suffit de les utiliser.

Fondamentalement: fendre par voie, chargement paresseux ce qui compte et laissez votre bundler gérer le reste.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!