Maison > Article > interface Web > Comment Vue utilise CDN pour optimiser le chargement du premier écran

Comment Vue utilise CDN pour optimiser le chargement du premier écran

php中世界最好的语言original: 2018-04-11 13:49:163491parcourir

Cette fois, je vais vous montrer comment Vue utilise CDN pour optimiser le chargement sur le premier écran. Quelles sont les précautions pour Vue utilisant CDN pour optimiser le chargement sur le premier écran. Voici des cas pratiques, jetons un coup d'œil. .

Dans le projet Vue, tous les fichiers js et css introduits dans le projet seront empaquetés dans supplier.js lors de la compilation. Le navigateur ne peut commencer à afficher le premier écran qu'après le chargement du fichier. Si de nombreuses bibliothèques sont introduites, la taille du fichier supplier.js sera assez importante, affectant l'expérience d'ouverture initiale.

La solution est de séparer les fichiers js et css externes auxquels fait référence à et de ne pas les compiler dans supplier.js. Au lieu de cela, ils sont référencés sous forme de ressources. De cette manière, le navigateur peut utiliser plusieurs threads. pour compiler de manière asynchrone supplier.js, des js externes, etc. sont chargés pour atteindre l'objectif d'accélérer la première ouverture.

Les fichiers de bibliothèque externes peuvent utiliser des ressources CDN ou d'autres ressources du serveur.

Ensuite, prenons l'introduction de vue, vuex et vue-router comme exemple pour illustrer le flux de traitement.

1. Présentation de la ressource

Dans index.html, ajoutez des ressources CDN, telles que bootstrap :

<body>
  <p id="app"></p>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 </body>

2. Ajouter une configuration

Dans le fichier bulid/webpack.base.conf.js, ajoutez des modules externes et importez les modules externes référencés, comme suit :

module.exports = {
 entry: {
  app: './src/main.js'
 },
 externals:{
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex':'Vuex'
 }

Remarque :

Le format est 'aaa' : 'bbb', où aaa représente le nom de la ressource à importer, et bbb représente le nom fourni par le module pour référence externe, qui est personnalisé par la bibliothèque correspondante. Par exemple, vue est Vue, vue-router est VueRouter.

3. Supprimer les références originales

Supprimez l'importation, telle que :

// import Vue from 'vue'
// import Router from 'vue-router'

Supprimez Vue.use(XXX), tel que :

// Vue.use(Router)

Test

Re-npm run build, vous verrez que la taille de supplier.js a diminué. Grâce à l'outil réseau en mode développeur, vous pouvez voir que les fichiers tels que vue.js, vuex.js, supplier.js, etc. sont chargés respectivement par un thread. Et grâce à l’utilisation du CDN, la vitesse de chargement est plus rapide que celle de votre propre serveur.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment packager les projets Vue par environnement

Un résumé de ce que vous devez savoir pour vous améliorer Vue.js

Explication détaillée de la méthode rem automatisée de build mobile de Webpack

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé de plusieurs points à connaître pour améliorer Vue.jsArticle suivant：Résumé de plusieurs points à connaître pour améliorer Vue.js

Articles Liés

Voir plus