Comment charger dynamiquement des scripts JS externes dans les composants VueJS pour des performances améliorées ?

Comment charger dynamiquement des scripts JS externes dans les composants VueJS

L'amélioration des fonctionnalités des composants nécessite souvent des scripts externes. Cependant, le chargement simultané de tous les scripts peut nuire aux performances. Si vous souhaitez charger des scripts uniquement lorsque cela est nécessaire, envisagez d'implémenter le chargement dynamique de scripts.

Solution

Les étapes suivantes décrivent une solution simple mais efficace pour charger dynamiquement des scripts externes dans Composants VueJS :

1. Créez un élément de script. Créez un nouvel élément de script et attribuez l'URL du script externe à l'attribut src. Par exemple, pour charger le script Google Recaptcha :

<code class="html">let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')</code>

2. Ajoutez le script à l'en-tête. Une fois l'élément de script créé, ajoutez-le à l'en-tête. du document à l'aide de document.head.appendChild(recaptchaScript).
3. Implémentez dans le hook Mounted() du composant. Placez le code pour créer et ajouter l'élément de script dans le cycle de vie Mounted() crochet du composant là où il est nécessaire. Cela garantit que le script se charge uniquement lorsque le composant est monté.

Exemple

Voici un exemple d'utilisation de cette technique dans un composant VueJS :

<code class="html"><template>
   .... your HTML
</template>

<script>
  export default {
    data: () => ({
      ......data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......methods of your component
    }
  }
</script></code>

En suivant ces étapes, vous pouvez charger dynamiquement des scripts JS externes dans les composants VueJS, garantissant que les scripts ne sont chargés que lorsque cela est nécessaire, améliorant ainsi les 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!