preload webpack plugin
3.0.0 alpha 1
Déacré: une fourche de ce projet, https://github.com/vuejs/preload-webpack-plugin peut être utilisée à la place.
Un plugin webpack pour câbler automatiquement asynchrone (et autres types) de morceaux javascript en utilisant <link rel='preload'> . Cela aide au chargement paresseux.
Remarque: Il s'agit d'un plugin d'extension pour html-webpack-plugin - un plugin qui simplifie la création de fichiers HTML pour servir vos bundles WebPack.
Précharge est une norme Web visant à améliorer les performances et le chargement granulaire des ressources. Il s'agit d'une récupération déclarative qui peut dire à un navigateur de commencer à récupérer une source car un développeur sait que la ressource sera bientôt nécessaire. Précharge: à quoi sert-elle? est une lecture recommandée si vous n'avez pas utilisé la fonctionnalité auparavant.
Dans les applications Web simples, il est simple de spécifier des chemins statiques vers des scripts que vous souhaitez précharger - surtout si leurs noms ou emplacements sont peu susceptibles de changer. Dans les applications plus complexes, JavaScript peut être divisé en "morceaux" (qui représentent des routes ou des composants) avec des noms dynamiques. Ces noms peuvent inclure des hachages, des nombres et d'autres propriétés qui peuvent changer avec chaque version.
Par exemple, chunk.31132ae6680e598f8879.js .
Pour faciliter le câble des morceaux asynchronisés pour le chargement paresseux, ce plugin offre un moyen d'accueil pour les câbler en utilisant <link rel='preload'> .
Ce module nécessite WebPack V4 et supérieur. Cela nécessite également que vous utilisez html-webpack-plugin dans votre projet WebPack.
Tout d'abord, installez le package en tant que dépendance dans votre package.json :
$ npm install --save-dev preload-webpack-plugin Dans votre configuration WebPack, require() le plugin de précharge comme suit:
const PreloadWebpackPlugin = require ( 'preload-webpack-plugin' ) ; Et enfin, ajoutez le plugin au tableau plugins de votre configuration Webpack après HtmlWebpackPlugin :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( )
] Lors du préchargement des fichiers, le plugin utilisera différents as attributs dépend du type de chaque fichier. Pour chaque fichier se termine par .css , le plugin le préchargera avec as=style , car chaque fichier se termine par .woff2 , le plugin le préchargera avec as=font , tandis que pour tous les autres fichiers, as=script sera utilisé.
Si vous ne préférez pas déterminer as l'attribut dépend du suffixe de nom de fichier, vous pouvez également le nommer explicitement en utilisant as :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
as : 'script'
} )
] Dans le cas où vous avez besoin d'un contrôle plus fin de l'attribut as , vous pouvez également fournir une fonction ici. Lorsque vous l'utilisez, le nom d'entrée sera fourni en tant que paramètre et la fonction elle-même doit renvoyer une chaîne pour as Attribut:
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' ;
}
} )
] Notez que si as=font est utilisée dans la précharge, la crossorigin sera également ajoutée. Explique que les valeurs peuvent être trouvées dans cet article, et une liste de valeurs communes as des valeurs peut être trouvée sur MDN.
Par défaut, le plugin supposera que les morceaux de script asynchrones seront préchargés. Ceci est l'équivalent de:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'asyncChunks'
} )
] Pour un projet générant deux scripts asynchronisés avec des noms générés dynamiquement, tels que chunk.31132ae6680e598f8879.js et chunk.d15e7fdfc91b34bb78c4.js , les préchargements suivants seront injectés dans le document <head> ::
< link rel =" preload " as =" script " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" preload " as =" script " href =" chunk.d15e7fdfc91b34bb78c4.js " > Vous pouvez également configurer le plugin pour précharger tous les morceaux (fournisseur, asynchronisation et morceaux normaux) en utilisant include: 'allChunks' , ou uniquement précharger les morceaux initiaux avec include: 'initial' .
Il est très courant dans WebPack d'utiliser des chargeurs tels que file-loader pour générer des actifs pour des types spécifiques, tels que des polices ou des images. Si vous souhaitez également précharger ces fichiers, même s'ils n'appartiennent pas à un morceau, vous pouvez utiliser include: 'allAssets' .
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'allChunks' // or 'initial', or 'allAssets'
} )
] Dans le cas où vous travaillez avec des morceaux nommés, vous pouvez explicitement spécifier lesquels include en passant un tableau:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : [ 'home' ]
} )
]Injectera juste ceci:
< link rel =" preload " as =" script " href =" home.31132ae6680e598f8879.js " > Il peut y avoir des morceaux que vous ne voulez pas avoir préchargés (Sourcemaps, par exemple). Avant de précharger chaque morceau, ce plugin vérifie que le fichier ne correspond à aucun regex dans l'option fileBlacklist . La valeur par défaut de cette liste noire est [/.map/] , ce qui signifie qu'aucun Sourcemaps ne sera préchargé. Vous pouvez facilement remplacer ceci:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .whatever / ]
} )Le passage de votre propre tableau remplacera la valeur par défaut, donc si vous souhaitez continuer à filtrer SourceMaps avec vos propres paramètres personnalisés, vous devrez inclure le regex pour SourceMaps:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .map / , / .whatever / ]
} ) Vous ne voudrez peut-être pas précharger des ressources dans certains de vos fichiers HTML. Vous pouvez utiliser excludeHtmlNames pour dire à ce plugin d'ignorer un ou plusieurs fichiers.
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' ] ,
} ) Si vous souhaitez utiliser des astuces de ressources (telles que prefetch ) au lieu de preload , ce plugin prend également en charge les câblage.
Préfet:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'prefetch'
} )
]Pour les morceaux asynchronisés mentionnés précédemment, le plugin mettrait à jour votre HTML à ce qui suit:
< link rel =" prefetch " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" prefetch " href =" chunk.d15e7fdfc91b34bb78c4.js " > <link> Les éléments ont la possibilité d'accepter les attributs multimédias. Ceux-ci peuvent accepter les types de médias ou les requêtes multimédias à part entière, vous permettant de faire un préchargement réactif.
Vous pouvez transmettre la valeur de l'attribut multimédia dans l'option media :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
media : '(min-width: 600px)'
} )
] Si vous avez trouvé une erreur ou que vous rencontrez des problèmes, veuillez déposer un problème.
Les correctifs sont encouragés et peuvent être soumis en fournissant ce projet et en soumettant une demande de traction via GitHub.
src/index.js et src/lib/ contient la source principale du plugin. test/ contient des tests.
Testez le plugin:
$ npm install
$ npm run testLe projet est rédigé dans ES2015 et est transpiré pour prendre en charge le nœud 6 et plus.
preload les ressources dont un utilisateur a peu de chances. Cela peut gaspiller leur bande passante.preload pour la session en cours si vous pensez qu'un utilisateur est susceptible de visiter la page suivante. Il n'y a pas de garantie à 100% des éléments préchargés se retrouveront dans le cache HTTP et liront localement au-delà de cette session.prefetch et preconnect . Les ressources prédéfinies sont maintenues dans le cache HTTP pendant au moins 5 minutes (en Chrome), quelle que soit la cachabilité de la ressource. Prise en charge native de WebPack: en ce qui concerne la version v4.6.0 de WebPack, il existe une prise en charge native pour générer à la fois la pré-feste et la pré-linde <link> via des commentaires "magiques" dans vos instructions import() .
script-ext-html-webpack-plagin: améliore html-webpack-plugin avec des options comprenant «async», «repartir», «module» et «précharge». À partir de la v1.7.0, il prend en charge les morceaux asynchronisés.
Ressource-hents-webpack-Plugin: Wire automatiquement des conseils de ressources pour vos ressources. Ce plugin ne prend pas actuellement en charge les morceaux asynchronisés.
Copyright 2019 Google, Inc.
Licencié à l'Apache Software Foundation (ASF) dans le cadre d'un ou plusieurs accords de licence de contributeur. Voir le fichier d'avis distribué avec ces travaux pour plus d'informations sur la propriété du droit d'auteur. L'ASF vous licencie ce fichier sous la licence Apache, version 2.0 (la "licence"); Vous ne pouvez pas utiliser ce fichier sauf conforme à la licence. Vous pouvez obtenir une copie de la licence à
http://www.apache.org/licenses/license-2.0
Sauf exiger la loi applicable ou convenu par écrit, les logiciels distribués en vertu de la licence sont distribués sur une base «tel quel», sans garantie ou conditions d'aucune sorte, expresse ou implicite. Voir la licence pour la langue spécifique régissant les autorisations et les limitations sous la licence.
