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!