Comment utiliser l'optimisation cdn dans vue

Cet article présente principalement la méthode d'utilisation de l'optimisation CDN dans les projets Vue. Je vais maintenant le partager avec vous et vous donner une référence.

Dans la rédaction de notre projet, les problèmes d'optimisation ne peuvent pas être ignorés, en particulier l'optimisation du premier écran est une priorité absolue. Voici deux méthodes d'optimisation : cdn et chargement asynchrone. Veuillez consulter le chargement asynchrone // www.jb51.net/article. /110661.htm

1. cdn

Tout d'abord, qu'est-ce que cdn ? Baidu vous-même

Sa fonction est la suivante : lorsque nous chargeons la page, nous devons charger certaines des dépendances dont nous avons besoin dans la session en cours. puis recommencez l'exécution, si nous avons le premier écran avec de nombreux modules, le temps d'attente sera plus long, et. La mémoire du navigateur peut exécuter jusqu'à quarante processus, et vous devez attendre que les précédents soient chargés avant d'exécuter le code suivant. Si nous utilisons CDN pour introduire des ressources tierces, nous pouvons soulager la pression sur notre serveur. est de diviser notre pression. Donner des points aux autres serveurs. Voici l'implémentation spécifique du code :

(1) Tout d'abord, présentez les ressources Les ressources fournies par bootstrap sont utilisées ici. Vous pouvez vous connecter au site officiel pour le voir. /www.bootcdn.cn/
vue est introduite dans le fichier index.js le plus externe, comme suit

<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>

Ensuite, l'endroit qui doit être modifié dans le projet est le webpack.base.conf Fichier .js sous le dossier bulid, changez L'endroit est

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

où vue et vue-router doivent être exposés pour une utilisation globale. Les minuscules vue et vue-router voici les noms correspondants lorsque nous les introduisons. ressources. Les noms en majuscules après les deux points sont le nom que nous définissons nous-mêmes et le nom à utiliser dans le projet. Bien entendu, les deux noms peuvent être identiques. L'étape suivante consiste à supprimer la méthode d'introduction d'origine où se trouvent les ressources correspondantes. référencés dans notre projet, c'est-à-dire que nous les avons initialement introduits avec import, par exemple Modifiez main.js et index.js dans le dossier du routeur :

// import Vue from 'vue'

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

Faites attention à modifier l'index.js dans le dossier du routeur

export default new VueRouter({
 // modes: 'history',
 routes: [
  {
   path: '/',
   redirect: '/main/home'
  },

Ce qui doit être expliqué ici Les modifications ci-dessus peuvent ne pas être nécessaires. Je suis ici juste pour enregistrer les connaissances. Si vous ne l'aimez pas, veuillez ne pas commenter. 🎜>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment déterminer NaN en JavaScript

Comment utiliser jQuery pour implémenter un effet d'animation de dégradé de transparence réactif à la souris

Comment implémenter l'effet d'animation Taobao réactif à la souris dans jQuery

Interprétation détaillée de la séparation et de la combinaison de vue-admin et backend (flask)

Expliquez la configuration de base en détail dans Vue+webpack

Comment créer une salle de discussion multi-personnes dans l'environnement nodejs+express

Comment implémenter le composant de fonction de notation par étoiles frontale à l'aide de vue2.0

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!