5
votes

Comment charger paresseusement un plugin dans Vue?

Les plugins Vue nécessitent généralement une configuration globale dans le point d'entrée de l'application par Vue.use (somePlugin) . Cela augmente la taille du bundle pour toutes les pages, ce qui est souvent mauvais et qu'il est préférable de différer le téléchargement du module jusqu'au moment où le module est réellement utilisé, c'est-à-dire le chargement paresseux ou le fractionnement du code. < / p>

Comment charger paresseusement un plugin si une seule page de mon application Vue en a besoin?

vue.js

0 commentaires

4 Réponses :

-1
votes

L'une des options est d'appeler votre fichier de plugin dans le hook créé / monté et de faire ce que vous voulez.

1 commentaires

Ceci n'est pas lié à la question.

-1
votes

Il suffit de l'importer sur la page spécifique, un exemple serait "Slide" de "vue-burger-menu"

<script>
import { Slide } from "vue-burger-menu"

export default {
  components: {
    Slide
  }
}
</script>

0 commentaires

1
votes

Vous pouvez créer une fonction anonyme qui renvoie une promesse, donc elle n'est importée que lorsque ce composant est réellement rendu.

export default {
  components: {
    Slide: () => import("vue-burger-menu")
  }
};

Vous pouvez en savoir plus à ce sujet dans le docs

4 commentaires

Cela ne répond pas à la question. La question concerne les plugins.

@Alisson: N'est-ce pas ce que fait ici import () ? vue-burger-menu n'est-il pas un plugin dans ce cas, qui est chargé paresseusement sur Slide ? Ou est-ce que je comprends mal l'idée?

@JeremyCaney c'est le chargement paresseux d'un composant (vue-burger-menu), qui n'est pas un plugin.

@Alisson: Aha, j'ai la distinction maintenant. Merci pour la clarification.

3
votes

Pour répondre plus directement à la question du PO: vous ne pouvez pas charger un plugin paresseux.

Selon la documentation , les plugins fournissent par définition des fonctionnalités accessibles à l'échelle mondiale et doivent être configuré avec Vue.use () avant la création de l'instance Vue. Pour cette raison, ils seront toujours regroupés avec l'intégralité de l'instance Vue (dans une partie des fournisseurs, par exemple).

Ce que vous voulez, c'est charger paresseusement la fonctionnalité dans une plus petite portée, au niveau du composant. En fonction du plugin, le module plugin devrait également prendre en charge une sorte d'importation directe de code au niveau du composant, comme celui-ci . Comme il utilise uniquement des instructions import , elles peuvent être asynchrones chargé .

TL; DR: Tout ce qui utilise Vue.use () ne peut pas être chargé paresseusement. Les importations peuvent être asynchrones.

0 commentaires