Kann der Frontend-Start schneller erfolgen?

Entwicklung
1

Hallo zusammen :blush:

Heute Nachmittag habe ich an der Optimierung des anfänglichen Ladens des Frontends gearbeitet, das manchmal auf dem Handy etwas langsam sein kann, wenn das Netzwerk schlecht ist, finde ich.

:wrench: Durchgeführte Verbesserungen:

:white_check_mark: Dynamisches Laden der schweren Bibliotheken :

  • HLS.js (Kamerastreaming)
  • Leaflet (Weltkarte)
  • ApexChart (Diagramme)

:backhand_index_pointing_right: Diese Bibliotheken werden nun nur noch bei Bedarf geladen und entlasten so das Haupt-Bundle.

:white_check_mark: Optimierung des Code-Splittings :

Einige Routen waren nicht korrekt getrennt, was das Laden unnötig aufwendig machte, indem der Code dieser Routen im Haupt-JS-Bundle enthalten war.

:bar_chart: Ergebnis:

Das Haupt-JS-Bundle reduziert sich von 2,94 MB auf 694 KB, was die Ladezeit deutlich verkürzt.

Natürlich ist nichts magisch, die aus dem Haupt-Bundle entfernte Größe wird auf das Bundle jeder Route hinzugefügt, aber die Idee ist, dass wir nur noch das laden, was wir brauchen.

Mein Ziel ist es, das Laden des Dashboards so schnell wie möglich zu gestalten, denn wenn ich auf Gladys auf meinem Handy zugreife, ist das oft nur, um eine Lampe auszuschalten, und wenn das Laden verlangsamt wird, nur weil das Frontend unnötige Dinge lädt, ist das schade :smiley:

:mobile_phone: Testet und gebt Feedback!

Ich habe einen Gladys Plus Build mit diesen Verbesserungen erstellt:

:link: https://dynamically-import-librairie.gladys-plus.pages.dev

Ich freue mich auf eure Eindrücke! :blush:

2

Hallo @pierre-gilles, das ist eine ausgezeichnete Nachricht, wenn wir die Ladezeit beschleunigen, wird das die Benutzererfahrung noch besser machen.
Aber für absolute Neulinge wie mich in Sachen Entwicklung: Was ist ein Haupt-JS-Bundle? :confused:

3

Gladys ist eine PWA (Progressive Web App), also eine Webanwendung, die sich eher wie eine App als wie eine Website verhält.

Das „Haupt-JS-Bundle“ ist im Grunde die JavaScript-Datei, die den „Haupt“-Code der Anwendung enthält und ausgeführt wird, wenn du sie startest.

Danach hat jede Seite der Oberfläche ihr eigenes JS-Bundle (= ihren Code).

Bisher war die Aufteilung zwischen dem Code des Haupt-Bundles und dem der Bundles jeder einzelnen Seite nicht perfekt. Dadurch hat dein Browser Zeit damit verschwendet, Code „zu früh“ zu interpretieren, zu einem Zeitpunkt, an dem du ihn nicht brauchst.

Der Nachteil dieser Optimierung ist, dass beim Wechseln der Seite das Laden beim ersten Aufruf dieser Seite etwas weniger instantan sein kann. Andererseits ist das initiale Laden schneller!

Im Fall von Gladys hat diese Aufteilung Sinn, da die meisten App-Öffnungen auf dem Mobilgerät dazu dienen, das Dashboard anzuzeigen, ein Gerät schnell zu steuern und Gladys dann zu schließen.