preload webpack plugin
3.0.0 alpha 1
Veraltet: Eine Gabel dieses Projekts, https://github.com/vuejs/preload-webpack-plugin kann stattdessen verwendet werden.
Ein Webpack -Plugin zum automatischen Verdrahtung von asynchronen (und anderen Typen) von JavaScript -Stücken unter Verwendung von <link rel='preload'> . Dies hilft beim faulen Laden.
Hinweis: Dies ist ein Erweiterungs-Plugin für html-webpack-plugin -ein Plugin, das die Erstellung von HTML-Dateien für Ihre Webpackbündel vereinfacht.
PREPLOAD ist ein Webstandard, der darauf abzielt, die Leistung und die körnige Belastung von Ressourcen zu verbessern. Es ist ein deklarativer Abruf, der einem Browser anweisen kann, eine Quelle abzurufen, da ein Entwickler weiß, dass die Ressource bald benötigt wird. Vorspannung: Wofür ist es gut? ist eine empfohlene Lektüre, wenn Sie die Funktion zuvor noch nicht verwendet haben.
In einfachen Web -Apps ist es einfach, statische Pfade für Skripte anzugeben, die Sie vorladen möchten - insbesondere wenn sich die Namen oder Standorte wahrscheinlich nicht ändern. In komplexeren Apps kann JavaScript in "Stücke" (die Routen oder Komponenten darstellen) mit dynamischen Namen aufgeteilt werden. Diese Namen können Hashes, Zahlen und andere Eigenschaften enthalten, die sich mit jedem Build ändern können.
Zum Beispiel chunk.31132ae6680e598f8879.js .
Um die Verdrahtung von asynchronen Stücken für faullades Ladung zu erleichtern, bietet dieses Plugin eine Einstellung, um sie mit <link rel='preload'> zu verkabeln.
Dieses Modul erfordert Webpack V4 und höher. Es erfordert auch, dass Sie html-webpack-plugin in Ihrem Webpack-Projekt verwenden.
Installieren Sie zunächst das Paket als Abhängigkeit in Ihrem package.json :
$ npm install --save-dev preload-webpack-plugin require() das Vorspannungs -Plugin wie folgt:
const PreloadWebpackPlugin = require ( 'preload-webpack-plugin' ) ; Fügen Sie schließlich das Plugin in das plugins -Array Ihrer WebPack -Konfiguration nach HtmlWebpackPlugin hinzu:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( )
] Beim Vorladen von Dateien wird das Plugin anders as Attribut verwendet, der vom Typ jeder Datei abhängt. Für jede Datei endet mit .css , das Plugin lädt es mit as=style , für jede Datei endet mit .woff2 , das Plugin wird es mit as=font vorlädt, während für alle anderen Dateien as=script verwendet wird.
Wenn Sie es nicht vorziehen, as Attribut zu bestimmen, hängt vom Suffix des Dateinamens ab, können Sie es auch as :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
as : 'script'
} )
] Falls Sie eine feinkörnige Kontrolle über das as Attribut benötigen, können Sie hier auch eine Funktion liefern. Bei der Verwendung wird der Eingabenname als Parameter angegeben, und die Funktion selbst sollte eine Zeichenfolge für as Attribut zurückgeben:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
as ( entry ) {
if ( / .css$ / . test ( entry ) ) return 'style' ;
if ( / .woff$ / . test ( entry ) ) return 'font' ;
if ( / .png$ / . test ( entry ) ) return 'image' ;
return 'script' ;
}
} )
] Beachten Sie, dass das crossorigin auch hinzugefügt wird, wenn as=font in der Vorspannung verwendet wird. In diesem Artikel finden sich erläutert, und eine Liste von gemeinsamen as Werten finden Sie auf MDN.
Standardmäßig geht das Plugin davon aus, dass asynchrische Skriptbrocken vorinstalliert werden. Dies ist das Äquivalent von:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'asyncChunks'
} )
] Für ein Projekt, das zwei asynchronisierte Skripte mit dynamisch generierten Namen generiert, z. B. chunk.31132ae6680e598f8879.js und chunk.d15e7fdfc91b34bb78c4.js , werden die folgenden Vorladungen in das Dokument <head> injiziert.
< link rel =" preload " as =" script " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" preload " as =" script " href =" chunk.d15e7fdfc91b34bb78c4.js " > Sie können das Plugin auch so konfigurieren, dass alle Brocken (Anbieter, Async und normale Stücke) vorliegen include: 'allChunks' oder nur vorlädt anfängliche Chunks mit include: 'initial' .
In WebPack ist es sehr häufig, Loader wie file-loader zu verwenden, um Vermögenswerte für bestimmte Typen wie Schriftarten oder Bilder zu generieren. Wenn Sie auch diese Dateien vorladen möchten, auch wenn sie nicht zu einem Stück gehören, können Sie include: 'allAssets' verwenden.
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'allChunks' // or 'initial', or 'allAssets'
} )
] Falls Sie mit den genannten Chunks zusammenarbeiten, können Sie ausdrücklich angeben, welche Sie durch Übergeben eines Arrays include :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : [ 'home' ]
} )
]wird genau das injizieren:
< link rel =" preload " as =" script " href =" home.31132ae6680e598f8879.js " > Möglicherweise gibt es Stücke, die Sie nicht vorinstallieren möchten (zum Beispiel Sourcemaps). Vor dem Vorladung jedes Stücks prüft dieses Plugin, dass die Datei in der Option fileBlacklist nicht übereinstimmt. Der Standardwert dieser schwarzen Liste lautet [/.map/] , was bedeutet, dass keine Sourcemaps vorinstalliert werden. Sie können dies problemlos überschreiben:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .whatever / ]
} )Wenn Sie Ihr eigenes Array übergeben, überschreiben Sie den Standard. Wenn Sie also weiterhin Sourcemaps zusammen mit Ihren eigenen benutzerdefinierten Einstellungen filtern möchten, müssen Sie den Regex für Sourcemaps einfügen:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .map / , / .whatever / ]
} ) Möglicherweise möchten Sie in einigen Ihrer HTML -Dateien keine Ressourcen vorladen. Sie können excludeHtmlNames verwenden, um dieses Plugin zu sagen, dass er eine oder mehrere Dateien ignorieren soll.
plugins : [
new HtmlWebpackPlugin ( {
filename : 'index.html' ,
template : 'src/index.html' ,
chunks : [ 'main' ]
} ) ,
new HtmlWebpackPlugin ( {
filename : 'example.html' ,
template : 'src/example.html' ,
chunks : [ 'exampleEntry' ]
} ) ,
// Only apply the plugin to index.html, not example.html.
new PreloadWebpackPlugin ( {
excludeHtmlNames : [ 'example.html' ] ,
} ) Wenn Sie Ressourcenhinweise (wie prefetch ) anstelle von preload verwenden möchten, unterstützt dieses Plugin auch die Verkabelung.
Prefetch:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'prefetch'
} )
]Für die zuvor erwähnten asynchronen Stücke würde das Plugin Ihre HTML auf Folgendes aktualisieren:
< link rel =" prefetch " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" prefetch " href =" chunk.d15e7fdfc91b34bb78c4.js " > <link> Elemente können Medienattribute akzeptieren. Diese können Medientypen oder ausgewachsene Medienabfragen akzeptieren, sodass Sie reaktionsschnell vorlädt werden können.
Sie können den Wert für das Medienattribut in der media übergeben:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
media : '(min-width: 600px)'
} )
] Wenn Sie einen Fehler gefunden oder Probleme begegnen, stellen Sie bitte ein Problem ein.
Patches werden gefördert und können eingereicht werden, indem dieses Projekt gegabelt und über GitHub eine Pull -Anfrage eingereicht wird.
src/index.js und src/lib/ enthält die primäre Quelle für das Plugin. test/ Enthält Tests.
Testen Sie das Plugin:
$ npm install
$ npm run testDas Projekt ist in ES2015 geschrieben und wird zur Unterstützung des Knotens 6 und höher transpiliert.
preload , die ein Benutzer wahrscheinlich nicht benötigt. Dies kann ihre Bandbreite verschwenden.preload für die aktuelle Sitzung, wenn Sie der Meinung sind, dass ein Benutzer wahrscheinlich die nächste Seite besucht. Es gibt keine 100% garantierten vorinstallierten Artikel im HTTP -Cache und lesen lokal über diese Sitzung hinaus.prefetch und preconnect . Bereitete Ressourcen werden im HTTP -Cache für mindestens 5 Minuten (in Chrome) unabhängig von der Ressource -Rendbarkeit (in Chrome) aufrechterhalten. Die native Unterstützung von WebPack: Nach der Veröffentlichung von WebPack v4.6.0 wird native Unterstützung für die Generierung von Vorab- und Vorladungs <link> über "Magic" -Kommentare in Ihren import() -Antagen ().
script-text-html-webpack-plugin: Verbessert html-webpack-plugin mit Optionen, einschließlich 'Async', 'Defer', 'Modul' und 'Preload'. Ab V1.7.0 unterstützt es asynchrische Stücke.
Ressourcen-Hint-Webpack-Plugin: Drähte Ressourcen-Hinweise für Ihre Ressourcen automatisch. Dieses Plugin unterstützt derzeit keine asynchronen Stücke.
Copyright 2019 Google, Inc.
Lizenziert für die Apache Software Foundation (ASF) im Rahmen eines oder mehreren Mitwirkenden Lizenzvereinbarungen. In der mit dieser Arbeit verteilten Mitteilungsdatei finden Sie zusätzliche Informationen zum Besitz des Urheberrechts. Die ASF lizenziert diese Datei unter der Apache -Lizenz, Version 2.0 ("Lizenz"); Sie dürfen diese Datei nur in Übereinstimmung mit der Lizenz verwenden. Sie können eine Kopie der Lizenz bei erhalten
http://www.apache.org/licenses/license-2.0
Sofern nicht nach geltendem Recht oder schriftlich zu vereinbart wird, wird die im Rahmen der Lizenz verteilte Software auf "As is" -Basis ohne Gewährleistung oder Bedingungen jeglicher Art ausdrücklich oder impliziert verteilt. Siehe die Lizenz für die spezifischen Sprachberechtigungen und Einschränkungen im Rahmen der Lizenz.
