Comment implémenter le chargement à la demande et le tremblement d'arbre dans Vue

Dans le développement front-end, à mesure que les sites Web et les applications continuent de croître, nous devons envisager d'optimiser notre code pour le rendre plus léger et plus rapide à charger. Dans ce processus, le chargement à la demande et le tremblement d'arbre peuvent être utilisés pour garantir notre sécurité. les applications sont aussi optimisées que possible.

Vue, en tant que framework JavaScript populaire, nous a fourni de nombreux outils et compétences pour nous aider à charger et utiliser Tree Shake plus facilement à la demande, afin d'améliorer les performances de nos applications. Cet article explique comment implémenter ces techniques dans Vue.

Chargement à la demande

Le chargement à la demande (Lazyloading) signifie que lorsque l'utilisateur a besoin d'accéder à une page ou un composant spécifique, les fichiers JavaScript et CSS requis sont chargés , ce qui accélère le chargement des pages car seul le code nécessaire est chargé. Vue propose plusieurs façons d'implémenter le chargement à la demande.

1. Utilisation des composants asynchrones de Vue

Vue fournit un type de composant spécial : le composant Async. En utilisant des composants asynchrones, nous pouvons retarder le chargement des composants requis.

<template>
  <div>
    <button @click="loadComponent">Load Component</button>
    <div v-if="showComponent">
      <AsyncComponent />
    </div>
  </div>
</template>

<script>
  import AsyncComponent from './AsyncComponent.vue'
  export default {
    components: {
      AsyncComponent
    },
    data () {
      return {
        showComponent: false
      }
    },
    methods: {
      loadComponent () {
        this.showComponent = true
      }
    }
  }
</script>

Dans cet exemple, nous créons un bouton pour déclencher la méthode loadComponent, qui définit le drapeau du composant d'affichage. L'AsyncComponent sera chargé et rendu uniquement si l'indicateur est vrai.

2. Utilisation du fractionnement de code de webpack

En plus des composants asynchrones de Vue, webpack fournit également la fonctionnalité de fractionnement de code. Code Splitting est une technologie frontale qui divise une application en modules plus petits afin qu'ils soient indépendants les uns des autres. En utilisant Code Splitting, nous pouvons charger des fichiers JavaScript et CSS à la demande.

Pour implémenter le fractionnement de code, nous devons utiliser les méthodes suivantes fournies par webpack :

import(/* webpackChunkName: "my-chunk-name" */ './my-component.js')

webpackChunkName indique à webpack comment nommer le morceau de code. Ce fichier sera regroupé dans un bloc de code séparé et chargé dynamiquement.

Tree Shaking

Tree Shaking est une technique qui supprime le code inutilisé d'une application. C'est utile en JavaScript, surtout lorsque nous utilisons de nombreuses bibliothèques tierces. L'agitation des arbres nous aidera à déterminer quel code de bibliothèque n'est pas utilisé, optimisant ainsi nos applications.

Dans Vue, nous pouvons utiliser les étapes suivantes pour optimiser l'application et mettre en œuvre le Tree Shaking.

1. Assurez-vous d'utiliser les modules ES6

Les applications Vue doivent utiliser les modules ES6. Cela signifie que nous devons utiliser des instructions import/export pour importer et exporter des modules. Les modules ES6 permettent à Webpack d'utiliser la technologie Tree Shaking.

2. Installez le plug-in babel-plugin-transform-imports

Nous devons installer babel-plugin-transform-imports, qui est un plug-in d'optimisation importé de le module. Ce plugin optimisera le code du module importé lors du packaging avec webpack.

Nous devons ajouter la configuration suivante dans .babelrc :

{
  "plugins": [
    ["transform-imports", {
      "lodash": {
        "transform": "lodash/${member}",
        "preventFullImport": true
      }
    }]
  ]
}

3. Activer le tremblement d'arbre dans le webpack

Pour activer le tremblement d'arbre, nous Le bloc de code suivant doit être utilisé dans webpack.config.js :

module.exports = {
  //...
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all'
    }
  }
};

runtimeChunk est défini sur « single » pour éviter la réutilisation dans le code.

chunks : 'all' garantit que webpack partage une quantité minimale de code entre tous les modules, réalisant ainsi le Tree Shake.

Conclusion

Les techniques de chargement à la demande et de secouage d'arbre sont cruciales pour améliorer les performances des applications. Dans Vue, ils peuvent être implémentés via les composants asynchrones de Vue et le fractionnement de code du webpack, ainsi qu'en utilisant le plugin babel-plugin-transform-imports et la fonctionnalité Tree Shaking de Webpack pour charger et supprimer dynamiquement le code inutilisé.

Nous devons toujours prêter attention aux performances de notre application et utiliser tous les outils et techniques susceptibles d'améliorer ses performances.

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!