Erste Seite laden Leistung für eine angularjs App

Question

Ich arbeite in einer AngularJS App, die Webpack zum Bündeln der Ressourcen verwendet. Derzeit erstellen wir eine einzige app.js-Datei, die auch das CSS enthält. Die Größe der app.js beträgt etwa 6 MB. Wenn wir die app.js in mehrere Blöcke aufteilen, verbessert dies die Seitenleistung. Meine Kollegen überzeugen mich, wenn wir die einzelne JS-Datei in 2 oder 3 aufteilen, dann wird die Seitenladezeit zweimal oder dreimal erhöht. Ist das wirklich wahr? Ich erinnere mich daran, einige gelesen zu haben, wo eine einzelne Datei besser ist als mehrere. Ich erinnere mich jetzt nicht wirklich an die Gründe. Muss ich wirklich die app.js Datei für die Seitenleistung brechen? oder welche anderen Möglichkeiten kann ich hier anwenden?

Answer 1

Ich habe einen praktischen Test in Chrome (Mac 54.0.2840.98 (64-Bit)) durchgeführt, um zu beweisen, ob es wirklich einen Leistungszuwachs beim Brechen einer großen JS-Datei in viele gibt. Ich habe eine 10MB js-Datei erstellt und drei Kopien davon erstellt. Verkettet alle 3 kopiert und erstellt eine 30MB-Datei. Ich habe die Zeit gemessen, die für die einzelne Datei, auf die mit einem normalen Skript-Tag verwiesen wird, am Seitenende gemessen wurde, und sie beträgt etwa 1 Minute. Dann referenzierte ich die 3 10MB Skriptdateien nacheinander und es dauerte fast 20 Sekunden, um alles zu laden. Es ist also wirklich ein Leistungsgewinn, wenn man eine riesige JS-Datei in viele aufteilt. Aber es gibt eine Grenze in der Nr. der Dateien kann der Browser parallel herunterladen.

Answer 2

Eine einzelne Datei bedeutet normalerweise eine bessere Leistung. Sie sollten auch sicherstellen, dass diese Datei ordnungsgemäß zwischengespeichert (auf der Browser-Seite) und gezippt wird, wenn sie von Ihrem Webserver bedient wird.

Answer 3

Eine einzelne Datei ist besser, weil sie weniger Verbindungen benötigt (dh weniger Overhead), aber das ist wirklich vernachlässigbar, wenn über < 5 Dateien gesprochen wird. Wenn Sie Teile Ihrer Datei aufteilen, haben Sie die Möglichkeit, die Dateien separat zu cachen, was oft ein großer Gewinn ist. Daher würde ich empfehlen, die Dateien in logisch abbildbaren Abschnitten zu teilen (wie Herstellercode und benutzerdefinierter Code).

Beachten Sie auch, dass, wenn der Client und der Server http/2 unterstützen, auch der Grund für weniger Verbindungen weg ist, da http/2 die Wiederverwendung von Verbindungen unterstützt.

Beachten Sie, dass es keinen wirklichen Unterschied für die anfängliche Ladezeit gibt, da in diesem Fall alle Dateien sowieso heruntergeladen werden müssen.