Wie optimiert man das Uniapp-Projekt? Der folgende Artikel wird Ihnen einige Methoden und Vorschläge zur Uniapp-Projektoptimierung vorstellen. Ich hoffe, dass er für Sie hilfreich sein wird.
Einführung: Leistungsoptimierung hat seit der Antike höchste Priorität. Die umfassendste Sammlung von Uniapp-Projektoptimierungsmethoden wird entsprechend der Entwicklungssituation ergänzt.
1. Komplexe Seitendatenbereiche werden in Komponenten gekapselt
Szenario:
Zum Beispiel enthält das Projekt eine ähnliche Forumseite: Klicken Sie auf ein Like-Symbol. Die Anzahl der Likes beträgt sofort +1, wodurch die Synchronisierung aller Daten auf Seitenebene aus dem js ausgelöst wird Ebene zur Ansichtsebene, wodurch die Daten der gesamten Seite aktualisiert werden, was zu einer Verzögerung bei der Klickverzögerung führt Komponente, sodass beim Aktualisieren von Daten nur diese Komponente aktualisiert wird Unterschied für alle Seiten
2. Vermeiden Sie die Verwendung großer Bilder Erhöhung und sogar ein Absturz des weißen Bildschirms; base64 von großen Binärdateien ist ebenfalls sehr ressourcenintensiv
Optimierungsplan:
Bitte komprimieren Sie die Bilder vor der Verwendung und vermeiden Sie bei Bedarf Sprite-Bilder oder SVG . Wenn einfacher Code dies erreichen kann, verwenden Sie keine Bilder. 3. Es gibt zu viele Seiten für kleine Programme und APP-Unteraufträge. Gehen Sie zum offiziellen Website-Handbuch, um die Konfiguration anzuzeigen
Funktionsbeschreibung:
Diese Funktion ist nur für WeChat-Miniprogramme, Apps, Baidu-Miniprogramme und ByteDance-Miniprogramme gültig.
Gehen Sie zu uView-Handbuch. Sehen Sie sich die Konfiguration an
5. Es ist verboten, lokalen Speicher zu missbrauchen. Verwenden Sie keine URLs, um Parameter zwischen lokalen Seiten zu übertragen. Wenn Sie lokalen Speicher verwenden, müssen Sie ihn bei Bedarf vernichten 6. Sie können extern definierte Variablen verwenden
In der Uni-App wird die Ansichtsebene jedes Mal, wenn sich die in Daten definierten Daten ändern, benachrichtigt, die Seite neu zu rendern. Wenn es sich also nicht um eine für die Ansicht erforderliche Variable handelt, wird sie angezeigt muss nicht in den Daten definiert werden, sondern kann extern als Variablen definiert oder direkt auf der Vue-Instanz bereitgestellt werden, um Ressourcenverschwendung zu vermeiden
7. Laden Sie Daten stapelweise, um die Seitendarstellung zu optimieren Wenn die Seite initialisiert wird, übergibt die Logikschicht eine große Datenmenge auf einmal an die Ansichtsschicht. Daten: Die Ansichtsschicht rendert eine große Anzahl von Knoten gleichzeitig, was zu einer Verlangsamung der Kommunikation und einer Verzögerung beim Seitenwechsel führen kann. Optimierungsplan:
Rendern Sie die Seite, indem Sie die Seite teilweise aktualisieren. Wenn der Server beispielsweise 100 Daten zurückgibt, können Sie stapelweise laden, jeweils 50 Elemente laden und nach 500 ms mit dem nächsten Ladevorgang fortfahren
8 Kommunikation zwischen der Ansichtsebene und der Logikebene
Reduzieren Sie die Scroll-Ereignisüberwachung der Scroll-View-Komponente. Beim Überwachen der Scroll-Ansicht sendet die Ansichtsebene häufig Daten an die Logikebene Ändern Sie beim Abhören der Scroll-Ereignisse der Scroll-View-Komponente die Scroll-Top-/Scroll-Left-Eigenschaften nicht in Echtzeit, da die Ansichtsebene beim Überwachen des Scrollens Daten an die Logikebene sendet Wenn sich Scroll-Top / Scroll-Left ändert, kommuniziert die Logikschicht mit der Ansichtsschicht, was zu Kommunikationsverzögerungen führen kann. Achten Sie bei der Verwendung von onPageScroll darauf, dass die Ansichtsschicht häufig mit der Logikschicht kommuniziert Daten
Verwenden Sie mehr CSS-Animationen, anstatt Animationen über die JS-Timer-Bedienschnittstelle durchzuführen.
Wenn Sie Folgevorgänge in Canvas ausführen müssen, wird empfohlen, renderjs auf der App-Seite und die Webansicht auf der Seite zu verwenden Applet-Seitenkomponenten; Seiten in der Webansicht verfügen nicht über das Konzept der Trennung von Logikebene und Ansichtsebene, und es kommt natürlich zu keinem Kommunikationsverlust
9. Sie müssen wissen, welche Attribute vorhanden sind Vererbungseffekte wie Schriftarten, Schriftfarbe und Textgröße werden alle vererbt, bedeutungsloser wiederholter Code ist verboten
10 Nutzen Sie Drosselung und Anti-Shake:
Warten Sie n Sekunden um eine Funktion auszuführen, wenn diese während der Wartezeit erneut ausgelöst wird, wird die Wartezeit neu initialisiert
Drosselung:
Das Triggerereignis wird nur einmal innerhalb von n Sekunden ausgeführt , ein erneutes Auslösen ist ungültig
11 Optimieren Sie die Seitenwechselanimation
Szenario:
Wenn die Seite initialisiert wird, wird eine große Anzahl von Bildern oder nativen Komponenten gerendert und eine große Menge an Datenkommunikation wird durchgeführt, um Ressourcen zu beanspruchen, was zu Verzögerungen beim Seitenwechsel und Frame-Drops führt
Optimierungsplan:
12. Optimieren Sie die Hintergrundfarbe, um weiß zu blinken. Szene:
Eingabe: Der Hintergrund blinkt weiß, wenn eine neue Seite erstellt wird auf der Vue-Seite, dass das neue Formular einen grauweißen Hintergrund hat, wenn die Animation zum ersten Mal gestartet wird, und zu einem dunklen Hintergrund wechselt, wenn die Animation endet, was zu einem Begrüßungsbildschirm führt
Optimierungslösung:
Schreibstile in App .vue kann das Rendern von Seitenstilen beschleunigen. Bei jedem Öffnen einer neuen Seite werden zuerst die Stile in App.vue und dann die normalen Stile geladen die Vue-Seite
- 13. Optimieren Sie die Startgeschwindigkeit
Je mehr Engineering-Code, einschließlich des größeren Das Hintergrundbild und die lokale Schriftartdatei wirken sich auf die Startgeschwindigkeit des Miniprogramms aus.
Beim Schließen von Splash gibt es einen Mechanismus Wenn die Startseite immer leer ist oder die Startseite selbst eine leere Übertragungsseite ist, kann es 10 Sekunden dauern, bis Splash geschlossen wird. -
Die App-Seite verwendet den v3-Compiler
Schneller Startmodus- Zu diesem Zeitpunkt startet die App am schnellsten
- Die App ist auf ein reines NVUE-Projekt eingestellt (im Manifest unter App-Plus eingestellt) Renderer: „nativ“, diese Art von Projekt startet schneller und kann in 2 Sekunden gestartet werden; da die gesamte Anwendung natives Rendering verwendet und das Webview-basierte Framework nicht lädt.
Wenn Uni-App für ein kleines Programm freigegeben wird Wenn die Funktionen von es6 bis es5 und die CSS-Ausrichtung verwendet werden, kann sich die Codegröße erhöhen. Sie können konfigurieren, ob diese Kompilierungsfunktionen aktiviert sind.
manifest-Konfiguration konfigurieren. Die Android-Basis-Engine ist etwa 9 MB groß. Die App bietet auch Erweiterungsmodule wie Karten, Bluetooth usw Wenn Sie diese Module beim Packen nicht benötigen, können Sie sie zuschneiden, um das Verteilungspaket zu reduzieren. Die Größe kann in den Berechtigungen des Manifest.json-App-Moduls ausgewählt werden.
App-Unterstützung Wenn Sie ein reines NVUE-Projekt auswählen (stellen Sie den Renderer ein: „nativ“ unter „app-plus“ im Manifest) kann die Paketgröße weiter um etwa 2 Millionen reduziert werden
-
Beschreibung:
- Wenn es eine offizielle API gibt, verwenden Sie keine zusätzlichen js-Plug-ins, um die Größe des Projekts zu erhöhen
Zum Beispiel: -
Url verwendet direkt encodeURIComponent() und decodeURIComponent(), um das Passwort zu übergeben
- Empfohlen: „
uniapp-Tutorial
“
Das obige ist der detaillierte Inhalt vonWie optimiert man ein Uniapp-Projekt? Teilen Sie mehrere Optimierungspläne und Vorschläge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
