Der Zweck dieser Seite besteht darin, weitere Ratschläge zum Umgang mit dem Problem der Leistungsoptimierung für Produktionswebsites zu geben.

Es scheint, dass Sie versucht haben, die Bundle-Blöcke auf der React-Produktionswebsite mithilfe von React.lazy} undsuspense} in React aufzuteilen; Dies führte jedoch nicht zu der erwarteten Verbesserung Ihres Web-Performance-Scores.

Aber warum ist das so?

Angesichts der Tatsache, dass für Ihre Produktionswebsite etwas Besonderes benötigt wurde.....

Mir wurde kürzlich die Aufgabe übertragen, die Leistung der Produktionswebsite zu verbessern. Ich dachte zunächst, dass wir jede Route langsamer laden sollten, aber mir wurde bald klar, dass dies bereits geschehen war.

Ich hatte auch angefangen, mich zu fragen, was als nächstes kommen würde.

Ich habe das Webpack-Bundle-Analysator-Plugin installiert und anschließend versucht, jedes Teil zu analysieren. Anschließend hatte ich viele Vorschläge, wie ich die Leistung verbessern könnte.

Main.bundle.js
Die Größe des Hauptpakets war zu groß, was zu einer Verlängerung der Download- und Analysezeit führte.

Wie kann man main.bundle.js zerstören?
In meinem Fall enthält mein Hauptpaket viel JSON, was mit der Übersetzung zusammenhängt, die die Größe des Hauptpakets um 1,5 MB erhöht hat.

Ich habe die Übersetzung mit Lazy Import aus dem main.js-Bundle entfernt. Dies ergibt eine Leistungsoptimierung von 40 %. Dies ist jedoch noch nicht geschehen, da wir von Lighthouse Performance Score nur 25 bis 35 erreicht haben.

Dann habe ich angefangen, mir andere potenziell große Dateien anzusehen.

Eines davon ist moment js, das zahlreiche Gebietsschemas enthält, die wir nicht für unsere Website verwendet haben. Das Ersetzen von Moment js durch eine leichtgewichtige Bibliothek ist eine Möglichkeit, dieses Problem zu beheben. Dies erfordert jedoch weitere Codeänderungen und erhöht meine Arbeitslast beim Testen der gesamten Website – etwas, das ich zuvor noch nicht getan hatte –, was zu weiteren Fehlern führen könnte. Dann habe ich beschlossen, herauszufinden, wie ich diese unerwünschten Regionen loswerden kann. Glücklicherweise war bereits ein Webpack-Plugin verfügbar. Durch die Verwendung dieses Plugins [ContextReplacementPlugin] konnte ich die Größe der Datei moment.js minimieren.

Bleiben Sie dran, es werden noch viele weitere folgen... Vielen Dank