Maison > Article > interface Web > Comment Vue utilise CDN pour optimiser la vitesse de chargement du premier écran
Comment Vue utilise CDN pour optimiser la vitesse de chargement du premier écran
- php中世界最好的语言original
- 2018-04-08 15:57:352518parcourir
Cette fois, je vais vous montrer comment Vue utilise CDN pour optimiser la vitesse de chargement du premier écran. Quelles sont les précautions pour Vue utilisant CDN pour optimiser la vitesse de chargement du premier écran. un cas pratique, jetons un coup d'oeil.
Avant-propos
En tant qu'application de site Web, la vitesse de chargement est très importante. Vitesse de chargement, l'une est la disposition raisonnable du programme, telle que le chargement des composants à la demande, et l'autre est le chargement asynchrone de js, css et d'autres ressources.
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, afin que le navigateur. peut utiliser plusieurs threads A pour charger de manière asynchrone supplier.js, js externes, etc. pour accélérer l'ouverture initiale.
Pour les fichiers de bibliothèque externes, vous pouvez utiliser des ressources CDN ou d'autres ressources du serveur.
Ci-dessous, prenez l'introduction de vue, vuex et vue-router comme exemple pour illustrer le flux de traitement.
1. Introduction aux ressources
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 la configuration
Dans le fichier bulid/webpack.base.conf.js, ajoutez des 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 signifie être introduit. nom de la ressource, bbb représente le nom fourni par le module aux références externes, qui est personnalisé par la bibliothèque correspondante. Par exemple, vue est Vue, vue-router est VueRouter.
3 Supprimez la référence d'origine
Supprimez l'importation, telle que :
// import Vue from 'vue' // import Router from 'vue-router'
Supprimez Vue.use(XXX), tel que :
// Vue.use(Router)
Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, et plus encore Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment soumettre des données au format JSON au serveur
Comment apprendre Vue pour les débutants
Comment gérer les liaisons répétées lorsque JS est chargé dynamiquement
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!