Explication détaillée des techniques de fractionnement de code et de chargement paresseux dans Vue

Avec le développement rapide de la technologie front-end, les applications Web modernes sont devenues de plus en plus complexes. Ces applications doivent traiter davantage de données et une logique métier plus complexe, ce qui rend les applications JavaScript de plus en plus volumineuses. Cela peut entraîner un démarrage plus lent de l'application et une mauvaise expérience utilisateur. À cette fin, Vue fournit des fonctionnalités avancées pour vous aider à optimiser votre application. Les plus importantes d’entre elles sont les techniques de fractionnement de code et de chargement paresseux.

Cet article expliquera en détail les techniques de fractionnement de code et de chargement paresseux dans Vue. Nous explorerons ce qu'est le fractionnement de code, pourquoi vous devez l'utiliser dans une application Vue et comment l'implémenter. En cours de route, nous discuterons également de ce que sont les techniques de chargement paresseux, pourquoi elles sont importantes et comment les utiliser dans Vue.

code splitting

Le fractionnement de code est une technique qui divise votre code en petits morceaux et les charge à la demande en cas de besoin. Le fractionnement du code peut contribuer à réduire le temps de chargement initial et à améliorer la vitesse d'accès, en particulier à mesure que votre application grandit.

Vue propose deux méthodes de fractionnement de code : via l'importation dynamique (Dynamic Import) ou en utilisant une bibliothèque tierce.

SCHEME D'IMPORTATION DYNAMIQUE

En utilisant l'importation dynamique, vous pouvez diviser votre application en morceaux de code plus petits qui peuvent être chargés à la demande en cas de besoin. L'importation dynamique doit être utilisée avec Webpack. Webpack peut regrouper les morceaux requis dans des fichiers séparés et charger ces morceaux uniquement lorsque l'utilisateur les demande.

Regardons maintenant un exemple simple. Supposons que nous ayons un composant App qui contient un composant User qui affiche les informations utilisateur. Nous pouvons diviser le composant User en un bloc de code. Lorsque l'utilisateur accède au composant App, le composant User ne sera chargé que lorsqu'il est nécessaire :

const App = {
  data() {
    return {
      user: null
    }
  },
  methods: {
    async loadUserData() {
      const userModule = await import('./user.js')
      this.user = userModule.default
    }
  },
  template: `
    <div>
      <button @click="loadUserData()">Load User Data</button>
      <div v-if="user">
        <h2>{{ user.name }}</h2>
        <p>{{ user.bio }}</p>
      </div>
    </div>
  `
}

Dans cet exemple, nous utilisons la fonction d'importation pour importer dynamiquement le module .js de l'utilisateur. Lorsque l'utilisateur clique sur le bouton « Charger les données utilisateur », le module est chargé et défini comme données utilisateur pour le composant App. Si l'utilisateur ne clique pas sur le bouton, le composant Utilisateur ne sera jamais chargé.

Solution de bibliothèque tierce

En plus de l'importation dynamique, vous pouvez également utiliser des bibliothèques tierces pour réaliser le fractionnement du code. Vue recommande d'utiliser le plugin @babel/plugin-syntax-dynamic-import pour prendre en charge l'importation dynamique.

Après avoir utilisé ce plug-in, vous pouvez utiliser la syntaxe d'importation dynamique dans votre application. Par exemple :

const Foo = () => import('./Foo.vue')

Cette instruction renverra une promesse, qui générera un objet modulaire ES une fois le chargement terminé.

chargement paresseux

Le chargement paresseux est similaire à l'importation dynamique. La différence est que le chargement différé est une méthode de chargement à la demande qui divise votre code en petits morceaux et ne les charge qu'en cas de besoin. Cela réduit le temps de chargement initial et améliore la vitesse d’accès.

Le chargement paresseux dans Vue peut être implémenté à l'aide des modules Webpack et ES. Vous trouverez ci-dessous deux façons d'y parvenir.

Chargement paresseux via vue-router

Le routeur Vue peut implémenter un chargement paresseux en définissant les composants comme des composants asynchrones. Les composants asynchrones renvoient une promesse, qui générera un composant Vue une fois le chargement terminé.

Voici un exemple d'utilisation d'un composant asynchrone pour charger un composant Utilisateur :

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: () => import('./components/User.vue')
    }
  ]
})

Dans cet exemple, nous utilisons un composant asynchrone dans la configuration du routeur. Lorsqu'un utilisateur accède au chemin "/user/:id", le composant User sera chargé de manière asynchrone.

Chargement paresseux via webpack

Tout composant d'une application Vue peut être défini comme un composant asynchrone. Webpack regroupe les composants asynchrones dans des fichiers séparés et les charge lorsque l'utilisateur les demande.

Voici un exemple de chargement d'un composant utilisateur à l'aide du chargement différé dans Webpack :

const User = () => import(/* webpackChunkName: "user" */ './User.vue')

Dans cet exemple, nous créons un composant utilisateur et le définissons comme des composants asynchrones. Webpack regroupe les composants utilisateur dans un fichier séparé nommé « user.chunk.js ».

Enfin, nous utilisons Vue Router ou Webpack pour implémenter le fractionnement de code et le chargement paresseux, accélérant ainsi le chargement des applications et optimisant l'expérience utilisateur. Il vous suffit d'utiliser les conseils ci-dessus pour diviser votre code en petits morceaux et les charger à la demande.

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!