Wie optimiert man ein Uniapp-Projekt? Teilen Sie mehrere Optimierungspläne und Vorschläge

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:

Es wird empfohlen, das Rendern von Bildern oder komplexen nativen Komponenten auf 100 bis 300 ms zu verschieben und die Datenkommunikation stapelweise durchzuführen, um die Anzahl der gleichzeitig gerenderten Knoten zu reduzieren.
Der Animationseffekt Auf der App-Seite kann der Dual-Form-Linkage-Extrusionsanimationseffekt von Popin/Popout angepasst werden. Der Ressourcenverbrauch ist höher. Wenn die Seite während der Animation zeitaufwändige JS ausführt, kann dies dazu führen, dass die Animation Frames verliert . Zu diesem Zeitpunkt können Sie Animationseffekte verwenden, die weniger Ressourcen verbrauchen, z. B. Slide-In-Right/Slide-Out-Right
App-nvue und H5 unterstützen auch das Vorladen von Seiten,
• uni.preloadPage

  Sorgen Sie für ein besseres Benutzererlebnis

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

Die App-Seite kann die native Hintergrundfarbe der Seite auch separat im Stil der page.json-Seite konfigurieren, z. B. die globale Hintergrundfarbe unter globalStyle->style->app-plus konfigurieren ->Hintergrund

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

  Nach dem Login kopieren

• nvue-Seite hat dieses Problem nicht, es kann auch in nvue-Seite geändert werden

• 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.
H5 von uni-app Auf der Clientseite stellt uni-app einen Baum bereit -Shaking-Optimierungsmechanismus. Die Gesamtpaketgröße von uni-app vor der Tree-Shaking-Optimierung beträgt etwa 500 KB und nach der Bereitstellung von gzip auf dem Server 162 KB. Um die Tree-Shaking-Optimierung zu aktivieren, müssen Sie die App-Seite von uni-app in der

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

15. Der Missbrauch externer js-Plug-ins ist verboten

• 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!