Comment charger des scripts JS externes dans les composants VueJS à la demande ?

Chargement de scripts JS externes dans les composants VueJS à la demande

Dans les applications Vue.js, vous pouvez rencontrer des scénarios dans lesquels des composants spécifiques nécessitent des scripts JavaScript externes . Par défaut, des scripts externes sont ajoutés au fichier index.html, ce qui peut entraîner un chargement inutile lorsque ces scripts ne sont pas immédiatement nécessaires.

Pour résoudre ce problème, Vue.js fournit un moyen pratique de charger dynamiquement des scripts externes. scripts au sein des composants, garantissant qu’ils sont disponibles uniquement lorsque cela est nécessaire. Cette technique implique l'utilisation du hook de cycle de vie Mounted().

Solution :

L'extrait de code suivant montre comment charger un script externe dans un composant Vue.js à l'aide du hook Mounted() :

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

<script>
  export default {
    data: () => ({
      ... data for your component
    }),
    mounted() {
      let externalScript = document.createElement('script')
      externalScript.setAttribute('src', 'https://example.com/external-script.js')
      document.head.appendChild(externalScript)
    },
    methods: {
      ... methods for your component
    }
  }
</script></code>

Avantages :

• Chargement sélectif : Les scripts externes ne sont chargés que lorsque le composant est monté , optimisant les performances.
• Modularité : Les composants peuvent rester indépendants, car les scripts externes sont chargés séparément.
• Performances améliorées : En chargeant des scripts sur demande, vous évitez de gonfler inutilement le temps de chargement de la page.

Exemple Source :

Cette solution a été adaptée d'un article de Lassi Iso-Uosukainen : https : //medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8

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!