preload webpack plugin
3.0.0 alpha 1
非推奨：このプロジェクトのフォーク、https：//github.com/vuejs/preload-webpack-pluginを代わりに使用できます。
<link rel='preload'>を使用して、非同期（および他のタイプ）のJavaScriptチャンクを自動的に配線するためのWebpackプラグイン。これは怠zyなロードに役立ちます。
注：これは、 html-webpack-pluginの拡張プラグインです。これは、Webパックバンドルを提供するHTMLファイルの作成を簡素化するプラグインです。
Preloadは、リソースのパフォーマンスと詳細な負荷を改善することを目的としたWeb標準です。開発者はリソースがすぐに必要になることを知っているため、ブラウザにソースの取得を開始するように指示できる宣言的なフェッチです。プリロード：何のために良いのですか？機能を以前に使用したことがない場合は、お勧めの読み取りです。
シンプルなWebアプリでは、プリロードしたいスクリプトへの静的パスを指定するのは簡単です。特に、名前や場所が変更されない場合はそうです。より複雑なアプリでは、JavaScriptを動的名で「チャンク」（ルートまたはコンポーネントを表す）に分割できます。これらの名前には、ビルドごとに変更できるハッシュ、数字、その他のプロパティを含めることができます。
たとえば、 chunk.31132ae6680e598f8879.js 。
Lazy-LoadingのためにAsyncチャンクを簡単に配線できるようにするために、このプラグインは<link rel='preload'>を使用してそれらを配線するドロップインの方法を提供します。
このモジュールには、Webpack V4以上が必要です。また、WebPackプロジェクトでhtml-webpack-plugin使用していることも必要です。
まず、 package.jsonの依存関係としてパッケージをインストールします。JSON：
$ npm install --save-dev preload-webpack-pluginWebpack configでは、次のようにプリロードプラグインrequire() 。
const PreloadWebpackPlugin = require ( 'preload-webpack-plugin' ) ;最後に、 HtmlWebpackPluginの後に、WebPack構成のpluginsアレイにプラグインを追加します。
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( )
]ファイルをプリロードする場合、プラグインは属性as異なるものを使用します。各ファイルのタイプに依存します。各ファイルについて.cssで終了すると、プラグインはas=styleでプリロードします。各ファイルでは.woff2で終了し、プラグインはas=fontでプリロードしますが、他のすべてのファイルでは、 as=scriptが使用されます。
属性as決定することを好まない場合は、ファイル名の接尾辞as依存します。
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
as : 'script'
} )
] as属性のよりきめ細かい制御が必要な場合は、ここで機能を提供することもできます。それを使用する場合、エントリ名はパラメーターとして提供され、関数自体は属性as文字列を返す必要があります。
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' ;
}
} )
] as=fontプリロードで使用されている場合、 crossoriginも追加されることに注意してください。説明はこの記事に記載されており、値のasのリストはMDNで見つけることができます。
デフォルトでは、プラグインは非同期スクリプトチャンクがプリロードされると想定します。これは次のとおりです。
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'asyncChunks'
} )
] chunk.31132ae6680e598f8879.jsおよびchunk.d15e7fdfc91b34bb78c4.jsなどの動的に生成された名前を持つ2つの非同期スクリプトを生成するプロジェクトの場合、次のプリロードはドキュメントに注入されます<head> ：
< link rel =" preload " as =" script " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" preload " as =" script " href =" chunk.d15e7fdfc91b34bb78c4.js " >また、すべてのチャンク（ベンダー、 include: 'allChunks' 、および通常のチャンク） include: 'initial'プリロードするようにプラグインを構成することもできます。
Webパックではfile-loaderなどのローダーを使用して、フォントや画像などの特定のタイプのアセットを生成することが非常に一般的です。これらのファイルも同様にプリロードしたい場合は、たとえそれらがチャンクに属していなくても、 include: 'allAssets'ができます。
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'allChunks' // or 'initial', or 'allAssets'
} )
]名前のチャンクを使用して作業した場合、配列を渡すことでincludeものを明示的に指定できます。
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : [ 'home' ]
} )
]これだけを注入します：
< link rel =" preload " as =" script " href =" home.31132ae6680e598f8879.js " >プリロードしたくないチャンクがあるかもしれません（たとえば、SourceMapsなど）。各チャンクをプリロードする前に、このプラグインはファイルがfileBlacklistオプションのRegexと一致しないことをチェックします。このブラックリストのデフォルト値は[/.map/]です。つまり、Sourcemapsはプリロードされないことを意味します。これを簡単にオーバーライドできます。
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .whatever / ]
} )独自の配列を渡すとデフォルトがオーバーライドされるため、独自のカスタム設定と一緒にsourcemapsのフィルタリングを続けたい場合は、sourcemapsの正規表現を含める必要があります。
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .map / , / .whatever / ]
} ) HTMLファイルの一部にリソースをプリロードしたくない場合があります。 excludeHtmlNamesを使用して、このプラグインを指示して1つ以上のファイルを無視できます。
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' ] ,
} )preload代わりにリソースのヒント（ prefetchなど）を使用したい場合は、このプラグインもそれらを配線することをサポートします。
プレッチ：
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'prefetch'
} )
]前述のASYNCチャンクの場合、プラグインはあなたのHTMLを以下に更新します。
< link rel =" prefetch " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" prefetch " href =" chunk.d15e7fdfc91b34bb78c4.js " > <link>要素には、メディア属性を受け入れる機能があります。これらは、メディアタイプまたは本格的なメディアクエリを受け入れることができ、応答性の高いプリロードを行うことができます。
メディア属性の値をmediaオプションで渡すことができます。
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
media : '(min-width: 600px)'
} )
] エラーが見つかったり、問題が発生した場合は、問題を提出してください。
パッチが奨励され、このプロジェクトを分岐し、GitHubを介してプルリクエストを送信することで提出することができます。
src/index.jsおよびsrc/lib/は、プラグインの主要なソースが含まれています。 test/コンテストテスト。
プラグインをテストします：
$ npm install
$ npm run testこのプロジェクトはES2015で記述されており、ノード6以降をサポートするために輸送されています。
preloadないように注意してください。ユーザーが必要とする可能性は低いです。これは帯域幅を無駄にする可能性があります。preloadを使用してください。 100％保証されたプリロードされたアイテムは、このセッションを超えて局所的に読み取られ、局所的に読み取られることはありません。prefetchとpreconnect使用してください。プリフェッチされたリソースは、リソースのキャッシュ性に関係なく、HTTPキャッシュで少なくとも5分間（Chromeで）維持されます。 Webpackのネイティブサポート：v4.6.0のWebpackのリリースの時点で、 import()ステートメントの「マジック」コメントを介してPrefetchとPreload <link>の両方を生成するためのネイティブサポートがあります。
Script-ext-html-webpack-plugin：「async」、「defer」、「モジュール」、「プリロード」などのオプションを備えたhtml-webpack-pluginを強化します。 v1.7.0の時点で、それは非同期チャンクをサポートしています。
Resource-Hints-Webpack-Plugin：リソースのリソースヒントを自動的にワイヤします。このプラグインは現在、Asyncチャンクをサポートしていません。
Copyright 2019 Google、Inc。
1つ以上の貢献者ライセンス契約の下で、Apache Software Foundation（ASF）にライセンスされています。著作権所有に関する追加情報については、この作業で配布された通知ファイルを参照してください。 ASFは、Apacheライセンス、バージョン2.0（「ライセンス」）に基づいて、このファイルをお客様にライセンスします。ライセンスに準拠している場合を除き、このファイルを使用することはできません。ライセンスのコピーを取得できます
http://www.apache.org/licenses/license-2.0
適用法で要求されていないか、書面で合意されていない限り、ライセンスに基づいて配布されたソフトウェアは、明示または黙示のいずれかの保証または条件なしに、「現状のまま」に基づいて配布されます。ライセンスに基づく権限と制限を管理する特定の言語のライセンスを参照してください。
