CDN optimise la vitesse de chargement du premier écran
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Interprétation approfondie : Pourquoi Laravel est-il aussi lent qu'un escargot ?
Mar 07, 2024 am 09:54 AM
Laravel est un framework de développement PHP populaire, mais il est parfois critiqué pour sa lenteur comme un escargot. Qu'est-ce qui cause exactement la vitesse insatisfaisante de Laravel ? Cet article fournira une explication détaillée des raisons pour lesquelles Laravel est aussi lent qu'un escargot sous plusieurs aspects, et la combinera avec des exemples de code spécifiques pour aider les lecteurs à mieux comprendre ce problème. 1. Problèmes de performances des requêtes ORM Dans Laravel, ORM (Object Relational Mapping) est une fonctionnalité très puissante qui permet
Discussion sur la stratégie d'optimisation gc de Golang
Mar 06, 2024 pm 02:39 PM
Le garbage collection (GC) de Golang a toujours été un sujet brûlant parmi les développeurs. En tant que langage de programmation rapide, le garbage collector intégré de Golang peut très bien gérer la mémoire, mais à mesure que la taille du programme augmente, certains problèmes de performances surviennent parfois. Cet article explorera les stratégies d'optimisation GC de Golang et fournira quelques exemples de code spécifiques. La collecte des déchets dans le garbage collector de Golang Golang est basée sur un balayage de marque simultané (concurrentmark-s
Optimisation des programmes C++ : techniques de réduction de la complexité temporelle
Jun 01, 2024 am 11:19 AM
La complexité temporelle mesure le temps d'exécution d'un algorithme par rapport à la taille de l'entrée. Les conseils pour réduire la complexité temporelle des programmes C++ incluent : le choix des conteneurs appropriés (tels que vecteur, liste) pour optimiser le stockage et la gestion des données. Utilisez des algorithmes efficaces tels que le tri rapide pour réduire le temps de calcul. Éliminez les opérations multiples pour réduire le double comptage. Utilisez des branches conditionnelles pour éviter les calculs inutiles. Optimisez la recherche linéaire en utilisant des algorithmes plus rapides tels que la recherche binaire.
Décoder les goulots d'étranglement des performances de Laravel : les techniques d'optimisation entièrement révélées !
Mar 06, 2024 pm 02:33 PM
Décoder les goulots d'étranglement des performances de Laravel : les techniques d'optimisation entièrement révélées ! Laravel, en tant que framework PHP populaire, offre aux développeurs des fonctions riches et une expérience de développement pratique. Cependant, à mesure que la taille du projet augmente et que le nombre de visites augmente, nous pouvons être confrontés au défi des goulots d'étranglement en matière de performances. Cet article approfondira les techniques d'optimisation des performances de Laravel pour aider les développeurs à découvrir et à résoudre les problèmes de performances potentiels. 1. Optimisation des requêtes de base de données à l'aide du chargement différé d'Eloquent Lorsque vous utilisez Eloquent pour interroger la base de données, évitez
Le goulot d'étranglement des performances de Laravel révélé : la solution d'optimisation révélée !
Mar 07, 2024 pm 01:30 PM
Le goulot d'étranglement des performances de Laravel révélé : la solution d'optimisation révélée ! Avec le développement de la technologie Internet, l’optimisation des performances des sites Web et des applications est devenue de plus en plus importante. En tant que framework PHP populaire, Laravel peut être confronté à des goulots d'étranglement en termes de performances pendant le processus de développement. Cet article explorera les problèmes de performances que les applications Laravel peuvent rencontrer et fournira des solutions d'optimisation et des exemples de code spécifiques afin que les développeurs puissent mieux résoudre ces problèmes. 1. Optimisation des requêtes de base de données Les requêtes de base de données sont l'un des goulots d'étranglement de performances courants dans les applications Web. exister
Mar 22, 2024 pm 03:21 PM
En tant que téléphone mobile phare qui a attiré beaucoup d'attention, le Kirin 9000 a suscité de nombreuses discussions et attention depuis son lancement. Il est équipé de la dernière puce phare de la série Kirin 9000 et ses performances sont très solides. Alors, quelles sont les performances des Kirin 9000 ? Explorons-le ensemble. Tout d'abord, le Kirin 9000s est fabriqué à l'aide d'un nouveau procédé 5 nm, qui améliore considérablement les performances et le contrôle de la consommation d'énergie de la puce. Par rapport aux processeurs Kirin précédents, le Kirin 9000 offre des performances considérablement améliorées. Qu'il s'agisse d'exécuter de gros jeux, d'effectuer plusieurs tâches ou
Comment optimiser les éléments de démarrage du système WIN7
Mar 26, 2024 pm 06:20 PM
1. Appuyez sur la combinaison de touches (touche Win + R) sur le bureau pour ouvrir la fenêtre d'exécution, puis entrez [regedit] et appuyez sur Entrée pour confirmer. 2. Après avoir ouvert l'éditeur de registre, nous cliquons pour développer [HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer], puis voyons s'il y a un élément Sérialiser dans le répertoire. Sinon, nous pouvons cliquer avec le bouton droit sur Explorateur, créer un nouvel élément et le nommer Sérialiser. 3. Cliquez ensuite sur Sérialiser, puis cliquez avec le bouton droit sur l'espace vide dans le volet de droite, créez une nouvelle valeur de bit DWORD (32) et nommez-la Étoile.
La configuration des paramètres du Vivox100 révélée : Comment optimiser les performances du processeur ?
Mar 24, 2024 am 10:27 AM
La configuration des paramètres du Vivox100 révélée : Comment optimiser les performances du processeur ? À l’ère actuelle de développement technologique rapide, les smartphones sont devenus un élément indispensable de notre vie quotidienne. En tant qu'élément important d'un smartphone, l'optimisation des performances du processeur est directement liée à l'expérience utilisateur du téléphone mobile. En tant que smartphone haut de gamme, la configuration des paramètres du Vivox100 a attiré beaucoup d'attention, en particulier l'optimisation des performances du processeur a attiré beaucoup d'attention de la part des utilisateurs. En tant que « cerveau » du téléphone mobile, le processeur affecte directement la vitesse de fonctionnement du téléphone mobile.
