Maison > Article > interface Web > CDN optimise la vitesse de chargement du premier écran

CDN optimise la vitesse de chargement du premier écran

php中世界最好的语言original: 2018-04-20 14:59:301712parcourir

Cette fois, je vais vous apporter CDN pour optimiser la vitesse de chargement du premier écran. Quelles sont les précautions pour que CDN optimise la vitesse de chargement du premier écran. Ce qui suit est un cas pratique, allons-y. jetez un 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 grande, ce qui affectera 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 Un thread charge de manière asynchrone supplier.js, js externe, etc. pour accélérer l'ouverture initiale.

Les fichiers de bibliothèque externes peuvent 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, et est personnalisé par la bibliothèque correspondante. Par exemple, vue est Vue et 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'

Supprimer Vue.use(XXX), tel que :

// Vue.use(Router)

Test

Redémarrer npm exécutez 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 utiliser le cache dans vue

Étapes détaillées pour soumettre des données au serveur à l'aide de JSON

Résumé des points de connaissances d'amélioration de Vue.js

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!

php json css bootstrap vue.js html npm webpack 线程 JS 异步

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：Optimisation du chargement du premier écran une fois l'empaquetage du projet vuejs terminéArticle suivant：Optimisation du chargement du premier écran une fois l'empaquetage du projet vuejs terminé

Articles Liés

Voir plus