Comment optimiser le projet Uniapp ? Partagez plusieurs plans et suggestions d'optimisation

Comment optimiser le projet uniapp ? L'article suivant partagera avec vous quelques méthodes et suggestions d'optimisation de projets Uniapp. J'espère qu'il sera utile à tout le monde.

Introduction : L'optimisation des performances est une priorité absolue depuis l'Antiquité. La collection la plus complète de méthodes d'optimisation de projets Uniapp sera complétée en fonction de la situation de développement

1.

Scénario :

Par exemple, le projet contient une page de forum similaire : cliquez sur une icône de like, le nombre de likes sera de +1 immédiatement, ce qui déclenchera la synchronisation de toutes les données au niveau de la page depuis le js couche à la couche d'affichage, provoquant la mise à jour des données de la page entière, provoquant un décalage de clic

Plan d'optimisation :

Pour les pages complexes, lors de la mise à jour des données dans une certaine zone, vous devez transformer cette zone en une composant, afin que seul ce composant soit mis à jour lors de la mise à jour des données

Remarque : app-nvue Ce problème n'existe pas avec h5 ; la raison de la différence est que l'applet ne fournit actuellement qu'un mécanisme de mise à jour des différences de composants et ne peut pas calculer automatiquement le différence pour toutes les pages

2. Évitez d'utiliser des images volumineuses

Scénario :

Si une grande quantité de ressources d'images volumineuses est utilisée dans la page, cela entraînera un décalage dans le changement de page, entraînant un ralentissement de la mémoire système. augmentation, et même un crash d'écran blanc ; la base64 des gros fichiers binaires est également très gourmande en ressources

Plan d'optimisation :

Veuillez compresser les images avant utilisation et éviter les images volumineuses Si nécessaire, vous pouvez envisager des images sprite ou svg. . Si un code simple peut y parvenir, aucune image n'est nécessaire. 3. Il y a trop de pages pour les petits programmes et la sous-traitance d'applications

Allez sur le manuel du site officiel Voir la configuration

4.

Description de la fonction :

Cette fonction n'est valable que pour les mini-programmes WeChat, les applications, les mini-programmes Baidu et les mini-programmes ByteDance. Elle est activée par défaut

Accédez au manuel uView pour afficher la configuration

.

5. Il est interdit d'abuser du stockage local

N'abusez pas du stockage local. Utilisez des URL pour transmettre des paramètres entre les pages locales. Si vous utilisez le stockage local pour transférer des données, vous devez le nommer et le détruire à la demande. 6. Vous pouvez définir des variables externes

Dans uni-app, chaque fois que les données définies dans les données changent, la couche de vue sera informée de restituer la page, donc s'il ne s'agit pas d'une variable requise par la vue, elle le sera ; n'a pas besoin d'être défini dans les données, mais peut être défini en externe. Variables ou directement monté sur l'instance de vue pour éviter le gaspillage de ressources.

7 Chargez les données par lots pour optimiser le rendu des pages. la page est initialisée, la couche logique transmet une grande quantité de données à la couche de vue à la fois. Données, la couche de vue restitue un grand nombre de nœuds à la fois, ce qui peut entraîner un ralentissement de la communication et un décalage de changement de page. Plan d'optimisation : .

Rendu la page en mettant à jour partiellement la page ; par exemple, si le serveur renvoie 100 éléments de données, vous pouvez charger par lots, charger 50 éléments à la fois et passer au chargement suivant après 500 ms

8. communication entre la couche de vue et la couche logique

Réduisez la surveillance des événements de défilement du composant de défilement-vue Lors du défilement des événements, la couche de vue enverra fréquemment des données à la couche logique

.

Lors de l'écoute des événements de défilement du composant scroll-view, ne modifiez pas les propriétés scroll-top / scroll-left en temps réel, car lors de la surveillance du défilement, la couche de vue enverra des données à la couche logique, lorsque. scroll-top / scroll-left est modifié, la couche logique communique avec la couche de vue, ce qui peut entraîner un retard de communication. Faites attention à l'utilisation de onPageScroll Lorsque onPageScroll est surveillé, la couche de vue communiquera fréquemment avec la couche logique. data

Utilisez davantage d'animation CSS au lieu de faire une animation via l'interface d'opération de minuterie js

Si vous devez effectuer des opérations de suivi dans Canvas, il est recommandé d'utiliser renderjs du côté de l'application et une vue Web du côté de l'application. Les composants côté applet ; les pages dans la vue Web n'ont pas le concept de séparation de la couche logique et de la couche de vue, et naturellement il n'y aura pas de perte de communication

• 9. Vous devez savoir quels attributs ont. les effets d'héritage, tels que les polices, la couleur de la police et la taille du texte, sont tous hérités, le code répété sans signification est interdit

• 10 Faites bon usage de la limitation et de l'anti-secousse

• Anti-secousse :

Attendez n secondes. pour exécuter une fonction, si pendant la période d'attente S'il est à nouveau déclenché, le temps d'attente sera réinitialisé

• Létranglement :

• L'événement déclencheur ne sera exécuté qu'une seule fois dans les n secondes si n secondes ne se sont pas écoulées. , le déclenchement à nouveau sera invalide

11 Optimisez l'animation de changement de page

Scénario :

.

Lorsque la page est initialisée, il y a un grand nombre d'images ou de rendu de composants natifs et une grande quantité de communication de données. Un nouveau rendu de page et une animation d'entrée de formulaire se produiront pour récupérer des ressources, ce qui entraînera des décalages de changement de page et des pertes de cadres

. Plan d'optimisation :

• Il est recommandé de reporter le rendu des images ou des composants natifs complexes entre 100 et 300 ms, et d'effectuer la communication des données par lots pour réduire le nombre de nœuds rendus en même temps

• L'effet d'animation du côté de l'application peut être personnalisé ; l'effet d'animation d'extrusion de lien à double forme de popin/popout convient à la consommation de ressources plus importante. Si la page exécute des js qui prennent beaucoup de temps pendant l'animation, l'animation peut perdre des images. . À l'heure actuelle, vous pouvez utiliser des effets d'animation qui consomment moins de ressources, tels que slide-in-right / slide-out-right

• App-nvue et H5 prennent également en charge le préchargement de page, uni.preloadPage, qui peut. offrir une meilleure expérience utilisateur

12. Optimiser la couleur d'arrière-plan pour qu'elle clignote en blanc

Scène :

Entrer L'arrière-plan clignote en blanc lorsqu'une nouvelle page est créée. Si l'arrière-plan de la page est sombre, cela peut arriver. dans la page de vue, le nouveau formulaire a un fond gris-blanc lorsqu'il démarre l'animation pour la première fois, et passe à un fond sombre à la fin de l'animation, provoquant un écran de démarrage

Solution d'optimisation :

• Styles d'écriture dans l'application .vue peut accélérer le rendu des styles de page ; les styles dans App.vue sont des styles globaux. Chaque fois qu'une nouvelle page est ouverte, les styles dans App.vue seront chargés en premier, puis les styles normaux seront chargés. la page vue

• Le côté application peut également configurer la couleur d'arrière-plan native de la page séparément dans le style de la page pages.json, par exemple en configurant la couleur d'arrière-plan globale sous globalStyle->style->app-plus ->arrière-plan

"style": { "app-plus": { "background":"#000000" } }

• la page nvue n'a pas ce problème, elle peut également être modifiée en page nvue

13 Optimiser la vitesse de démarrage

• Plus il y a de code d'ingénierie, y compris le plus grand. l'image d'arrière-plan et le fichier de police local, cela a un impact sur la vitesse de démarrage du mini programme. Vous devez faire attention au contrôle de la taille.

• Il existe un mécanisme de détection d'écran blanc lors de la fermeture de Splash du côté de l'application. la page d'accueil est toujours blanche ou la page d'accueil elle-même est une page de transfert vide, la fermeture de Splash peut prendre 10 secondes

• Le côté App utilise le compilateur v3. Lorsque la page d'accueil est une page nvue, elle est définie sur

  fast. mode de démarrage. À ce moment, l'application démarre le plus rapidement

• L'application est définie sur un moteur de rendu de projet nvue pur (défini sous app-plus dans le manifeste) : "natif"), ce type de projet démarre plus rapidement et peut être démarré en 2 secondes car l'ensemble de l'application utilise le rendu natif et ne charge pas le framework basé sur WebView

14 Taille du package d'optimisation

• Lorsqu'uni-app est publié dans un petit programme, si. les fonctions d'es6 à es5 et d'alignement css sont utilisées, la taille du code peut augmenter Vous pouvez configurer si ces fonctions de compilation sont activées

• H5 d'uni-app Côté client, uni-app fournit un tree-shaking. mécanisme d'optimisation. La taille globale du paquet d'uni-app avant l'optimisation du tremblement d'arborescence est d'environ 500 000, et elle est de 162 000 après le déploiement de gzip sur le serveur. Pour activer l'optimisation du tremblement d'arborescence, vous devez configurer le côté application d'uni-app dans la configuration

  manifest. Le moteur de base Android fait environ 9 M. L'application fournit également des modules d'extension, tels que des cartes, Bluetooth, etc. Vous n'avez pas besoin de ces modules lors de l'empaquetage, vous pouvez les recadrer pour réduire le package de distribution ; la taille peut être sélectionnée dans les autorisations du module manifest.json-App

Support de l'application Si vous choisissez un projet nvue pur (définissez le moteur de rendu : "natif" sous app-plus dans le manifeste), la taille du package peut être encore réduite d'environ 2M
Après HBuilderX 2.7, le côté application a supprimé le mode de compilation non-v3 et la taille du package a diminué de 3M
• 15. L'abus de plug-ins js externes est interdit

Description:

S'il existe une API officielle, n'utilisez pas de plug-ins js supplémentaires pour augmenter la taille du projet

Par exemple :

Url utilise directement encodeURIComponent() et decodeURIComponent() pour transmettre le mot de passe

Recommandé : "tutoriel uniapp"

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!