Durchsetzung von Leistungsbudgets mit Webpack

Moderne Webanwendungen verlassen sich nicht mehr auf ein einziges großes JavaScript -Paket. Untersuchungen zeigen, dass größere Pakete den Speicherverbrauch und die CPU-Last erhöhen, insbesondere auf mobilen Geräten mit niedrigem und mittlerem Ende. WebPack bietet mehrere Funktionen, um Prioritäten der Paketgröße und Steuerung von Ressourcen zu reduzieren. Die Codesegmentierung unterteilt den Code in mehrere Pakete, das auf Anfrage oder parallel geladen wird. Leistungstipps erkennen, ob die Paketgröße den angegebenen Schwellenwert beim Erstellen überschreitet, um unnötigen Code zu optimieren oder zu löschen.

Webpack standardmäßig werden Warnungen ausgestellt, wenn die Ressourcengröße oder der Einstiegspunkt 250 KB ( webpack.config.js performance ) überschreitet. In diesem Artikel wird beschrieben, wie diese Funktion als erste Verteidigungslinie verwendet wird, um die Leistungsverschlechterung zu verhindern.

Passen Sie Ihr Budget an

Die Standard -Schwellenwerte für Ressourcen- und Einstiegspunktgröße entsprechen möglicherweise nicht immer Ihren Anforderungen, können jedoch konfiguriert werden. Beispielsweise kann ein kleiner Blog ein Budget von 48,8 Kib (48,8 kib) pro Ressourcen und Einstiegspunkte haben. Die relevanten Einstellungen in webpack.config.js sind wie folgt:

 module.exports = {
  Leistung: {
    MaxassetSize: 50000,
    MaxentryPointsize: 50000,
  }
};

maxAssetSize und maxEntrypointSize -Eigenschaften steuern die Schwellengröße (in Bytes) der Ressource und des Einstiegspunkts. maxEntrypointSize stellt sicher, dass Pakete, die aus im entry aufgeführten Dateien erstellt wurden (normalerweise JavaScript- oder SASS -Dateien), den angegebenen Schwellenwert nicht überschreiten. maxAssetSize erzwingt die gleichen Einschränkungen für andere von WebPack generierte Ressourcen (wie Bilder, Schriftarten usw.).

Ein Fehler erscheint, wenn der Schwellenwert überschritten wird

Webpack gibt eine Warnung aus, wenn der Haushaltsschwellenwert standardmäßig überschritten wird. Dies reicht für die Entwicklungsumgebung aus, jedoch nicht für die Produktionsumgebung. Sie können einen Fehler auslösen, indem Sie hints Eigenschaftseigenschaft zum performance hinzufügen und auf 'error' einstellen:

 module.exports = {
  Leistung: {
    MaxassetSize: 50000,
    MaxentryPointsize: 50000,
    Hinweise: 'Fehler',
  }
};

Andere gültige Werte für hints sind 'warning' und false . false deaktiviert die Warnung vollständig, auch wenn die angegebene Grenze überschritten wird. Es wird nicht empfohlen, im Produktionsmodus false zu verwenden.

Bestimmte Ressourcen ausschließen

WebPack erzwingt einen Größenschwellenwert für jede Art von Ressource, die es generiert. Wenn eine Ressource die angegebene Grenze überschreitet, wird ein Fehler geworfen. Wenn WebPack beispielsweise so konfiguriert ist, dass Bilder verarbeitet werden, tritt ein Fehler auf, solange eines der Bilder den Schwellenwert überschreitet.

assetFilter -Eigenschaft kann verwendet werden, um die Dateien zu steuern, die zur Berechnung der Leistungsaufforderungen verwendet werden:

 module.exports = {
  Leistung: {
    MaxassetSize: 50000,
    MaxentryPointsize: 50000,
    Hinweise: 'Fehler',
    AssetFilter: Funktion (AssetFileName) {
      return! assetFileName.endswith ('. jpg');
    },
  }
};

Dies fordert WebPack an, dass Dateien, die in .jpg enden, beim Ausführen der Berechnungen zur Leistungseingabeaufforderung ausgeschlossen werden. Es kann komplexere Logik verwenden, um die Bedingungen verschiedener Umgebungen, Dateitypen und anderer Ressourcen zu erfüllen.

Limit

Eine aktuelle Einschränkung besteht darin, dass der gleiche Haushaltsschwellenwert für alle Ressourcen und Einstiegspunkte gilt. Mit anderen Worten, mehrere Budgets werden noch nicht nach Bedarf festgelegt, z. B. das Festlegen unterschiedlicher Einschränkungen für JavaScript, CSS und Bilddateien. Es gibt jedoch bereits offene Zuganfragen, die diese Einschränkung beseitigen sollten.

Zusammenfassen

Zu Beginn des Projekts ist es nützlich, Leistungsbudgets einzurichten und durchzusetzen. Es wird Sie daran erinnern, auf die Größe Ihrer Abhängigkeiten zu achten und Sie zu ermutigen, leichtere Alternativen zu finden, um das Budget zu vermeiden.

Aber das Leistungsbudget hört hier nicht auf! Ressourcengröße ist nur einer von vielen Faktoren, die die Leistung beeinflussen. Daher ist weiterhin mehr Arbeit erforderlich, um sicherzustellen, dass die beste Erfahrung bereitgestellt wird. Das Ausführen von Leuchtturmtests ist eine großartige Möglichkeit, andere Metriken und Verbesserungsvorschläge zu verstehen.

Das obige ist der detaillierte Inhalt vonDurchsetzung von Leistungsbudgets mit Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!