Résumé des méthodes d'optimisation du projet vue

Cette fois, je vais vous apporter un résumé des méthodes d'optimisation des projets Vue. Quelles sont les précautions pour l'optimisation des projets Vue. Voici des cas pratiques, jetons un coup d'oeil.

Optimisation de l'image

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. génération de toile

2. Réduisez les demandes d'images et utilisez des sprites

1. pour générer en ligne : Sprites Generator, Tencent's gopng, spriteme

2. Code génération : gulp.spritesmith ou sass compass

PageOptimisation des performances

Chargement paresseux d'images ou de composants

Utilisez le composant vue-lazyload ou un autre composant

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 de l'image

Afficher rapidement les images

Scénario d'utilisation : dans un composant qui affiche des images, lorsque vous feuilletez constamment les images sur la page suivante, l'obtention de données du serveur puis l'affichage de l'image entraîneront le chargement de l'image. lentement. Dans ce cas, 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 tripartite (chargement à la demande). )

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

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], solve), bon support

() => system.import(URL), disponible sur le site officiel de webpack2 La déclaration sera progressivement supprimée. Il n'est pas recommandé d'utiliser

() => import(URL). Il est recommandé par le site officiel de webpack2. Il appartient à la catégorie es7 et doit être utilisé avec la syntaxe de babel. -plugin d'importation dynamique

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 :

Un résumé de trois façons de charger dynamiquement des fichiers JS

Un résumé des méthodes inter-domaines que js prend en charge les demandes de publication

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!