Stratégie d'optimisation complète pour les projets vue

Cette fois, je vais vous présenter une stratégie d'optimisation complète pour le projet Vue. Quelles sont les précautions pour l'optimisation complète du projet Vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

ImagesOptimisation

1. Optimisation de la taille de l'image, certaines images utilisent WebP (la compatibilité WebP doit être prise en compte)

1. Génération en ligne, telle que Zhitu, Youpaiyun

2. génération gulp, gulp-webp ou gulp-imageisux

3. canvas Générer

2. Réduisez les demandes d'images, utilisez l'image sprite

1. pour générer en ligne : générateur de sprites, gopng de Tencent, spriteme

2. Génération de code : gulp.spritesmith ou sass compass

PageOptimisation des performances

Chargement paresseux d'images ou de composants

Utilisez le composant vue-lazyload ou certains autres composants

Adresse vue-lazyload : https://www.npmjs.com/package/vue - lazyload

Chargement paresseux de l'image : v-lazy ou utilisez v-lazy-container pour contenir un groupe d'images

// 引入一张图片 
<img v-lazy="//domain.com/img1.jpg"> 
// 引入一组图片
<p v-lazy-container="{ selector: &#39;img&#39;, error: &#39;xxx.jpg&#39;, loading: &#39;xxx.jpg&#39; }">
 <img src="//domain.com/img1.jpg">
 <img src="//domain.com/img2.jpg">
 <img src="//domain.com/img3.jpg"> 
</p>

Chargement paresseux des composants

Vue.use(VueLazyload, {
 lazyComponent: true
});
<lazy-component>
 <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

Préchargement d'images

Afficher rapidement les images

Scénario d'utilisation : dans un composant qui visualise des images, lors de la navigation constante dans les images de la page suivante, les données sont obtenues du serveur puis affichées L'image se chargera lentement. À ce moment, vous pouvez précharger l'image lors de l'affichage de nouvelles données. Une fois l'image chargée, remplissez l'image dans la position correspondante

Chargement paresseux du plug-in tiers. ins (sur demande) Chargement)

les fichiers js sont généralement chargés de manière synchrone, et les placer dans la page bloquera le chargement du fichier js principal.

Scénarios d'utilisation : Lorsque certains projets doivent introduire des fichiers tels que jquery, l'introduction de ces fichiers à l'intérieur du composant bloquera dans une certaine mesure le rendu de la page, elle est donc chargée dynamiquement via des événements spécifiques (cliquez sur ou fenêtre pop-up) Les fichiers JS tels que jquery peuvent afficher rapidement la page principale.

Chargement asynchrone des pages, comment empêcher les composants de se chevaucher

Lorsque plusieurs composants de vue sont chargés et que les composants sont rendus via des données côté serveur, plusieurs composants se chevauchent d'abord puis se séparent.

Trois options

• Lorsque la section affichée sur la page est fixe et que la hauteur du contenu n'est pas facile à modifier, elle peut être défini à l'avance à l'extérieur du composant. Une hauteur fixe qui s'affiche comme si vous ajoutiez du contenu à un cadre. Lorsque le contenu de la page n'est pas fixe, afin de réduire le problème de chevauchement des composants lors du chargement asynchrone, vous pouvez définir d'autres composants à afficher sur le premier écran lorsque les données d'un certain composant sont chargés et affichés via v- montrer.

• Lorsque la page est corrigée dans son ensemble, vous pouvez ajouter un squelette à la page pour empêcher la page de scintiller. Pour une implémentation spécifique, veuillez vous référer à http://www.jb51.net/article/130505.htm

• Page de rendu côté serveur Pour certaines pages avec des données fixes et quelques modifications, vous pouvez envisager de passer Le rendu côté serveur affichera la page dans un court laps de temps, offrant une meilleure expérience utilisateur.

Réduire la taille des fichiers externes importés

Lorsque le projet introduit du contenu ElementUI, configurez le fichier .babelrc en introduisant babel-plugin- composant, de sorte que des composants partiels puissent être introduits pour réduire la taille du composant.

Chargement paresseux des routes

Mais lors de l'utilisation de vue-router, webpack regroupera tous les composants dans un fichier js, ce qui rend le fichier très volumineux, donc il affectera le chargement de la page d'accueil. Le meilleur moyen est de regrouper d'autres itinéraires dans différents fichiers js, puis de charger les fichiers js correspondants lors du changement d'itinéraire.

resolve => require([URL], resolve), 支持性好
() => system.import(URL) , webpack2官网上已经声明将逐渐废除, 不推荐使用
() => import(URL), webpack2官网推荐使用, 属于es7范畴, 需要配合babel的syntax-dynamic-import插件使用

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 vue pour enregistrer des composants

Comment utiliser le routage imbriqué à trois couches Vue

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!