Methoden und Vorschläge zur Uniapp-Projektoptimierung

1. Kapseln Sie komplexe Seitendatenbereiche in Komponenten

Szenario:

Beispielsweise enthält das Projekt eine Forumsseite wie diese: Durch Klicken auf ein „Gefällt mir“-Symbol wird die Anzahl der „Gefällt mir“-Angaben sofort um 1 erhöht, was dazu führt, dass alle Daten auf Seitenebene von der JS-Ebene mit der Ansichtsebene synchronisiert werden, was wiederum zu einer Aktualisierung der Daten der gesamten Seite führt und zu Klickverzögerungen und Einfrieren führt.

Optimierungsplan:

Bei komplexen Seiten müssen Sie beim Aktualisieren von Daten in einem bestimmten Bereich diesen Bereich zu einer Komponente machen, sodass beim Aktualisieren von Daten nur diese Komponente aktualisiert wird.

Hinweis: app-nvue und h5 haben dieses Problem nicht; der Grund für den Unterschied liegt darin, dass das Applet derzeit nur einen Mechanismus zum Aktualisieren von Komponentenunterschieden bereitstellt und nicht alle Seitenunterschiede automatisch berechnen kann.

2. Vermeiden Sie die Verwendung großer Bilder

Szenario:

Wenn eine Seite eine große Anzahl großer Bildressourcen verwendet, kommt es zu einem Hängenbleiben beim Seitenwechsel, was zu einem erhöhten Systemspeicherbedarf und sogar zu einem Absturz mit weißem Bildschirm führt; auch die Base64-Konvertierung großer Binärdateien ist sehr ressourcenintensiv.

Optimierungsplan:

Bitte komprimieren Sie die Bilder vor der Verwendung, vermeiden Sie die Verwendung großer Bilder und verwenden Sie bei Bedarf Sprites oder SVG. Verwenden Sie keine Bilder, wenn einfacher Code das gewünschte Ergebnis erzielen kann.

3. Miniprogramme und APPs verarbeiten zu viele Seiten in Unterpaketen

Gehen Sie zum Handbuch der offiziellen Website, um die Konfiguration anzuzeigen

4. Lazy Loading von Bildern

Funktionsbeschreibung:
Diese Funktion ist nur für WeChat-Miniprogramme, Apps, Baidu-Miniprogramme und ByteDance-Miniprogramme gültig. Sie ist standardmäßig aktiviert. Gehen Sie zum uView-Handbuch, um die Konfiguration anzuzeigen.

5. Missbrauch des lokalen Speichers verbieten

Missbrauchen Sie den lokalen Speicher nicht. Verwenden Sie URLs, um Parameter zwischen lokalen Seiten zu übergeben. Wenn Sie den lokalen Speicher zum Übergeben von Daten verwenden, müssen Sie ihn standardisiert benennen und bei Bedarf löschen.

6. Variablen können extern definiert werden

In Uni-App benachrichtigen die in Daten definierten Daten die Ansichtsebene, die Seite bei jeder Änderung neu zu rendern. Wenn die Variable also von der Ansicht nicht benötigt wird, kann sie in Daten definiert werden. Sie können die Variable extern definieren oder direkt auf der Vue-Instanz mounten, um Ressourcenverschwendung zu vermeiden.

7. Laden Sie Daten stapelweise, um die Seitendarstellung zu optimieren

Szenario:
Beim Initialisieren der Seite übergibt die Logikebene eine große Menge an Daten auf einmal an die Ansichtsebene. Dadurch rendert die Ansichtsebene eine große Anzahl an Knoten auf einmal, was wiederum zu einer Verlangsamung der Kommunikation und zu einem Hängenbleiben beim Seitenwechsel führen kann.

Optimierungsplan:
Rendern Sie die Seite, indem Sie sie teilweise aktualisieren. Wenn der Server beispielsweise 100 Daten zurückgibt, können diese stapelweise geladen werden, jeweils 50 Daten gleichzeitig, und der nächste Ladevorgang wird nach 500 ms ausgeführt.

8. Vermeiden Sie häufige Kommunikation zwischen der Ansichtsebene und der Logikebene

• Reduzieren Sie die Überwachung des Scroll-Ereignisses der Scroll-View-Komponente. Bei der Überwachung des Scroll-Ereignisses der Scroll-View-Komponente sendet die Ansichtsebene häufig Daten an die Logikebene.
• Ändern Sie beim Überwachen der Bildlaufereignisse der Bildlaufansichtskomponente die Eigenschaften „Bildlauf oben“ / „Bildlauf links“ nicht in Echtzeit, da beim Überwachen des Bildlaufs die Ansichtsebene mit der Logikebene kommuniziert und beim Ändern von „Bildlauf oben“ / „Bildlauf links“ die Logikebene mit der Ansichtsebene kommuniziert, was zu Kommunikationsstörungen führen kann.
• Beachten Sie die Verwendung von onPageScroll. Wenn onPageScroll zuhört, sendet die Ansichtsebene häufig Daten an die Logikebene.
• Verwenden Sie mehr CSS-Animationen anstelle von JS-Timern, um die Schnittstelle für Animationen zu bedienen
• Wenn Sie Handverfolgungsvorgänge in Canvas durchführen müssen, wird empfohlen, Renderjs auf der App-Seite und Web-View-Komponenten auf der Miniprogrammseite zu verwenden. Die Seiten in der Web-Ansicht verfügen nicht über das Konzept einer Trennung zwischen der Logikebene und der Ansichtsebene, sodass natürlich kein Kommunikationsverlust auftritt.

9. CSS-Optimierung

Sie müssen wissen, welche Eigenschaften geerbte Effekte haben, wie etwa Schriftart, Schriftfarbe und Textgröße. Wiederholen Sie keinen sinnlosen Code.

10. Drosselung und Anti-Shake sinnvoll nutzen

Bildstabilisierung:
Warten Sie n Sekunden, bevor Sie eine Funktion ausführen. Wenn sie während der Wartezeit erneut ausgelöst wird, wird die Wartezeit neu initialisiert und gedrosselt:
Das Triggerereignis wird nur einmal innerhalb von n Sekunden ausgeführt. Wenn n Sekunden nicht vergangen sind, ist der nächste Trigger ungültig.

11.Seitenwechsel-Animation optimieren

Szenario:
Beim Initialisieren der Seite werden eine große Anzahl von Bildern oder nativen Komponenten gerendert und es findet eine große Datenmenge statt. Das Rendering der neuen Seite und die Animation beim Aufrufen des Formulars konkurrieren um Ressourcen, was dazu führt, dass der Seitenwechsel hängen bleibt und Frames verloren gehen.

Optimierungsplan:

• Es wird empfohlen, beim Rendern von Bildern oder komplexen nativen Komponenten eine Verzögerung von 100–300 ms einzuhalten und die Datenkommunikation stapelweise durchzuführen, um die Anzahl der gleichzeitig gerenderten Knoten zu verringern.
• Die Animationseffekte auf der App-Seite können angepasst werden. Der Pop-in/Pop-out-Dual-Window-Linkage-Extrusion-Animationseffekt verbraucht mehr Ressourcen. Wenn die Seite während der Animation zeitaufwändige JS ausführt, kann dies dazu führen, dass die Animation Frames verliert. In diesem Fall 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, was eine bessere Benutzererfahrung bieten kann

12.Optimieren Sie die Hintergrundfarbe Blitzweiß

Szenario:
Beim Aufrufen einer neuen Seite blinkt der Hintergrund weiß. Wenn der Seitenhintergrund dunkel ist, beginnt das neue Formular möglicherweise mit einem grauweißen Hintergrund auf der Vue-Seite zu animieren und wechselt dann am Ende der Animation zu einem dunklen Hintergrund, was zu einem blinkenden Bildschirm führt.

Optimierungsplan:

Das Schreiben von Stilen in App.vue kann das Rendern von Seitenstilen beschleunigen. Die Stile in App.vue sind globale Stile. Jedes Mal, wenn eine neue Seite geöffnet wird, werden zuerst die Stile in App.vue und dann die Stile der normalen Vue-Seiten geladen.

Die native Hintergrundfarbe der Seite kann die App auch separat im Stil der Seite in pages.json konfigurieren. Konfigurieren Sie beispielsweise die globale Hintergrundfarbe unter globalStyle->style->app-plus->background

"Stil": { "App-Plus": { "Hintergrund": "#000000" } }

Die nvue-Seite hat dieses Problem nicht, und Sie können auch zur nvue-Seite wechseln

13. Startgeschwindigkeit optimieren

• Je mehr Projektcode vorhanden ist, einschließlich Hintergrundbilder und lokaler Schriftdateien, desto größer sind sie, was sich auf die Startgeschwindigkeit des Miniprogramms auswirkt. Sie sollten auf die Kontrolle der Größe achten.
• Der Begrüßungsbildschirm auf der App-Seite verfügt über einen Mechanismus zur Erkennung weißer Bildschirme. Wenn die Homepage immer weiß ist oder die Homepage selbst eine leere Übertragungsseite ist, kann es 10 Sekunden dauern, bis der Begrüßungsbildschirm geschlossen wird.
• Wenn die App den v3-Compiler verwendet und die Startseite die NVUE-Seite ist und auf den Schnellstartmodus eingestellt ist, startet die App zu diesem Zeitpunkt am schnellsten.

Die App ist als reines nvue-Projekt eingestellt (im Manifest unter app-plus den Renderer „native“ einstellen). Diese Art von Projekt startet schneller und kann in 2 Sekunden gestartet werden, da es in der gesamten Anwendung natives Rendering verwendet und das Framework nicht basierend auf Webview lädt.

14. Paketgröße optimieren

• Wenn Uni-App für Miniprogramme freigegeben wird und die Ausrichtungsfunktionen von ES6 auf ES5 und CSS verwendet werden, kann sich die Codegröße erhöhen. Sie können konfigurieren, ob diese Kompilierungsfunktionen aktiviert werden.
• Auf der H5-Seite von Uni-App bietet Uni-App einen Tree-Shaking-Optimierungsmechanismus. Die Gesamtpaketgröße von Uni-App vor der Tree-Shaking-Optimierung beträgt etwa 500 KB und nach der GZIP-Bereitstellung auf dem Server 162 KB. Um die Tree-Shaking-Optimierung zu aktivieren, müssen Sie sie im Manifest konfigurieren
• Die App-Seite von Uni-App, der Android-Basis-Engine, ist etwa 9 M groß. Die App bietet auch Erweiterungsmodule wie Karten, Bluetooth usw. Wenn diese Module beim Verpacken nicht benötigt werden, können sie ausgeschnitten werden, um das Verteilungspaket zu verkleinern. Die Größe kann in manifest.json-App-Modulberechtigungen ausgewählt werden
• Die App unterstützt, dass, wenn Sie ein reines NVUE-Projekt auswählen (Renderer: „native“ unter App-Plus im Manifest festlegen), die Paketgröße um etwa 2 MB weiter reduziert werden kann
• Nach HBuilderX 2.7 wurde auf der App-Seite der Nicht-v3-Kompilierungsmodus entfernt und die Paketgröße um 3M verringert

15. Verbieten Sie den Missbrauch externer JS-Plugins

beschreiben:
Wenn eine offizielle API vorhanden ist, fügen Sie keine zusätzlichen JS-Plugins hinzu, um die Projektgröße zu erhöhen, zum Beispiel:
Verwenden Sie encodeURIComponent() und decodeURIComponent(), um die URL zu verschlüsseln.

Dies ist das Ende dieses Artikels über Methoden und Vorschläge zur Uniapp-Projektoptimierung. Weitere relevante Inhalte zur Uniapp-Projektoptimierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!