webpack がアセット キャッシュをサポートする仕組み
アプリのサイズを最適化した後、 キャッシュ保存がアプリの読み込み時間を短縮しますこれを使用して、アプリの一部を 毎回再ダウンロードする必要はありません
バンドルのバージョニングとキャッシュ ヘッダーを使用する
キャッシュ保存の一般的なアプローチは次のとおりです。
ファイルをかなり長い期間(1 年間など)キャッシュに保存するようブラウザに指示します。
# Server header Cache-Control: max-age=31536000
Cache-Control
の機能に詳しくない場合は、Jake Archibald 著 優れた POST キャッシュ ベスト プラクティスをご覧ください。変更したらファイルの名前を変更し、強制的に再ダウンロードするようにします。
<!-- Before the change --> <script src="./index-v15.js"></script> <!-- After the change --> <script src="./index-v16.js"></script>
この方法では、ブラウザに JS ファイルをダウンロードしてキャッシュに保存し、 コピーされます。ファイル名が変更された場合にのみブラウザがネットワークに接続する (または 1 年経過した場合)。
webpack でも同じことを行いますが、バージョン番号の代わりに、
あります。ファイル名にハッシュを含めるには、次のコマンドを使用します。
[chunkhash]
:
// webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.[chunkhash].js' // → bundle.8e0d62a03.js
}
};
もし
渡すには、HtmlWebpackPlugin
または
WebpackManifestPlugin
。
HtmlWebpackPlugin
は、
シンプルだが柔軟性は低いですこのプラグインは、コンパイル時に
コンパイル済みのすべてのリソースを含む HTML ファイル。サーバーのロジックが
複雑であれば、これで十分です。
<!-- index.html -->
<!DOCTYPE html>
<!-- ... -->
<script src="bundle.8e0d62a03.js"></script>
「
WebpackManifestPlugin
はより柔軟なアプローチであり、複雑なサーバー部分がある場合に役立ちます。
ビルド時に、ファイル名間のマッピングを含む JSON ファイルが生成されます。
ハッシュなしのファイル名とハッシュ付きのファイル名ですサーバーでこの JSON を使用して、
次のように指定します。
// manifest.json
{
"bundle.js": "bundle.8e0d62a03.js"
}
関連情報
- Jake Archibald : キャッシュのベストテイクについて プラクティス
依存関係とランタイムを別のファイルに抽出する
依存関係
アプリの依存関係は、実際のアプリコードよりも頻繁に変更されない傾向があります。引っ越した場合 別のファイルにまとめると、ブラウザはそれらを個別にキャッシュできます。 ダウンロードされ、アプリコードが変更されるたびに再ダウンロードされることはありません。
依存関係を別のチャンクに抽出するには、次の 3 つの手順を行います。
出力ファイル名を
[name].[chunkname].js
に置き換えます。// webpack.config.js module.exports = { output: { // Before filename: 'bundle.[chunkhash].js', // After filename: '[name].[chunkhash].js' } };
webpack がアプリをビルドすると、
[name]
が置き換えられます。 チャンク名が付けられます。[name]
部分を追加しない場合、次のようになります。 ハッシュでチャンクを区別するのは非常に困難です。entry
フィールドをオブジェクトに変換します。// webpack.config.js module.exports = { // Before entry: './index.js', // After entry: { main: './index.js' } };
このスニペットでは、「main」がチャンクの名前です。この名前は次の文字列に置き換えられます: ステップ 1 の
[name]
の場所。この時点で、アプリをビルドすると、このチャンクにはアプリコード全体が含まれるようになります。これは、 まだこの段階では実行していないので ご注意くださいでもすぐに変わる。
webpack 4 で、
optimization.splitChunks.chunks: 'all'
オプションを追加します。 を webpack の構成に追加します。// webpack.config.js (for webpack 4) module.exports = { optimization: { splitChunks: { chunks: 'all' } } };
このオプションを使用すると、スマートコード分割が有効になります。これを使用すると、webpack は 30 KB を超える(圧縮と gzip の実行前)共通のコードも抽出されます。 これは、ビルドで複数のバンドルが生成される場合に有用です(たとえば、 アプリをルートに分割した場合)。
webpack 3 で
CommonsChunkPlugin
を追加します。// webpack.config.js (for webpack 3) module.exports = { plugins: [ new webpack.optimize.CommonsChunkPlugin({ // A name of the chunk that will include the dependencies. // This name is substituted in place of [name] from step 1 name: 'vendor', // A function that determines which modules to include into this chunk minChunks: module => module.context && module.context.includes('node_modules'), }) ] };
このプラグインは、パスに
node_modules
とパスが含まれているすべてのモジュールを受け取ります。 これらをvendor.[chunkhash].js
という別のファイルに移動します。
これらの変更後、各ビルドは、main.[chunkhash].js
と 2 つのファイルを生成します。
vendor.[chunkhash].js
(webpack 4 の場合は vendors~main.[chunkhash].js
)。webpack 4 の場合は
依存関係が小さいと、ベンダー バンドルが生成されないことがありますが、それで問題はありません。
$ webpack
Hash: ac01483e8fec1fa70676
Version: webpack 3.8.1
Time: 3816ms
Asset Size Chunks Chunk Names
./main.00bab6fd3100008a42b0.js 82 kB 0 [emitted] main
./vendor.d9e134771799ecdf9483.js 47 kB 1 [emitted] vendor
ブラウザはこれらのファイルを個別にキャッシュし、変更されたコードのみを再ダウンロードします。
Webpack ランタイム コード
残念ながら、ベンダーコードだけを抽出するだけでは不十分です。エラーを アプリコードを変更します。
// index.js
…
…
// E.g. add this:
console.log('Wat');
vendor
ハッシュも変わることがわかります。
Asset Size Chunks Chunk Names
./vendor.d9e134771799ecdf9483.js 47 kB 1 [emitted] vendor
↓
Asset Size Chunks Chunk Names
./vendor.e6ea4504d61a1cc1c60b.js 47 kB 1 [emitted] vendor
これは、Webpack バンドルがモジュールのコードとは別に、 ランタイム - 小さなコード モジュールの実行を管理します。コードを複数のファイルに分割すると このコードにはまず、チャンク ID と 対応するファイル:
// vendor.e6ea4504d61a1cc1c60b.js
script.src = __webpack_require__.p + chunkId + "." + {
"0": "2f2269c7f0a55a5c1871"
}[chunkId] + ".js";
Webpack は、最後に生成されたチャンク(vendor
)にこのランタイムを含めます。
この例ではチャンクが変更されるたびに、このコードも変更されます。
vendor
チャンク全体が変更されます。
この問題を解決するには、ランタイムを別のファイルに移動します。webpack 4 の場合:
optimization.runtimeChunk
オプションを有効にすると実現できます。
// webpack.config.js (for webpack 4)
module.exports = {
optimization: {
runtimeChunk: true
}
};
webpack 3 でこれを行うには、CommonsChunkPlugin
を指定して追加の空のチャンクを作成します。
// webpack.config.js (for webpack 3)
module.exports = {
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: module => module.context && module.context.includes('node_modules')
}),
// This plugin must come after the vendor one (because webpack
// includes runtime into the last chunk)
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime',
// minChunks: Infinity means that no app modules
// will be included into this chunk
minChunks: Infinity
})
]
};
これらの変更後、各ビルドで次の 3 つのファイルが生成されます。
$ webpack
Hash: ac01483e8fec1fa70676
Version: webpack 3.8.1
Time: 3816ms
Asset Size Chunks Chunk Names
./main.00bab6fd3100008a42b0.js 82 kB 0 [emitted] main
./vendor.26886caf15818fa82dfa.js 46 kB 1 [emitted] vendor
./runtime.79f17c27b335abc7aaf4.js 1.45 kB 3 [emitted] runtime
これらを逆の順序で index.html
に含めたら、完了です。
<!-- index.html -->
<script src="./runtime.79f17c27b335abc7aaf4.js"></script>
<script src="./vendor.26886caf15818fa82dfa.js"></script>
<script src="./main.00bab6fd3100008a42b0.js"></script>
関連情報
- 長期キャッシュ保存に関する Webpack ガイド
- Webpack ドキュメント マニフェスト
- 「 CommonsChunkPlugin"
optimization.splitChunks
とoptimization.runtimeChunk
の仕組み
余分な HTTP リクエストを保存するインライン webpack ランタイム
改善するには、webpack ランタイムを HTML にインライン化してみましょう。 レスポンスが返されます。例:
<!-- index.html -->
<script src="./runtime.79f17c27b335abc7aaf4.js"></script>
手順:
<!-- index.html -->
<script>
!function(e){function n(r){if(t[r])return t[r].exports;…}} ([]);
</script>
ランタイムは小さく、インライン化すると、HTTP リクエスト( HTTP/1 では重要ですが、HTTP/2 ではそれほど重要ではありませんが、それでも あります)。
次にその方法をご紹介します。
HTMLWebpackPlugin を使用して HTML を生成する場合
「 HtmlWebpackPlugin を使用して、 HTML ファイル、 InlineSourcePlugin これだけで十分です。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
inlineSource: 'runtime~.+\\.js',
}),
new InlineSourcePlugin()
]
};
カスタム サーバー ロジックを使用して HTML を生成する場合
webpack 4 を使用する場合:
追加
WebpackManifestPlugin
次のようにして、ランタイム チャンクの生成された名前を確認します。// webpack.config.js (for webpack 4) const ManifestPlugin = require('webpack-manifest-plugin'); module.exports = { plugins: [ new ManifestPlugin() ] };
このプラグインでビルドすると、次のようなファイルを作成します。
// manifest.json { "runtime~main.js": "runtime~main.8e0d62a03.js" }
ランタイム チャンクのコンテンツを簡単な方法でインライン化します。例:Node.js と Express の場合:
// server.js const fs = require('fs'); const manifest = require('./manifest.json'); const runtimeContent = fs.readFileSync(manifest['runtime~main.js'], 'utf-8'); app.get('/', (req, res) => { res.send(` … <script>${runtimeContent}</script> … `); });
webpack 3 を使用する場合:
filename
を指定してランタイム名を静的にします。module.exports = { plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'runtime', minChunks: Infinity, filename: 'runtime.js' }) ] };
runtime.js
のコンテンツを簡単な方法でインライン化します。例:Node.js と Express の場合:// server.js const fs = require('fs'); const runtimeContent = fs.readFileSync('./runtime.js', 'utf-8'); app.get('/', (req, res) => { res.send(` … <script>${runtimeContent}</script> … `); });
現時点で不要なコードの遅延読み込み
ページには、重要度の高い要素と重要度の低い要素が含まれる場合があります。
- YouTube で動画ページを読み込む場合、動画よりも重要なのは動画です。 できます。ここでは、コメントよりも動画が重要です。
- ニュースサイトの記事を開く場合、その記事のテキストが 記事をご覧ください。ここでは、広告よりもテキストが重要です。
このような場合は、ファイルのみをダウンロードして、初期読み込みのパフォーマンスを向上させます。
残りの部分は後で遅延読み込みできます。
import()
関数と
これをcode-splittingします。
// videoPlayer.js
export function renderVideoPlayer() { … }
// comments.js
export function renderComments() { … }
// index.js
import {renderVideoPlayer} from './videoPlayer';
renderVideoPlayer();
// …Custom event listener
onShowCommentsClick(() => {
import('./comments').then((comments) => {
comments.renderComments();
});
});
import()
は、特定のモジュールを動的に読み込むことを指定します。日時
webpack が import('./module.js')
を認識すると、このモジュールを別の
chunk:
$ webpack
Hash: 39b2a53cb4e73f0dc5b2
Version: webpack 3.8.1
Time: 4273ms
Asset Size Chunks Chunk Names
./0.8ecaf182f5c85b7a8199.js 22.5 kB 0 [emitted]
./main.f7e53d8e13e9a2745d6d.js 60 kB 1 [emitted] main
./vendor.4f14b6326a80f4752a98.js 46 kB 2 [emitted] vendor
./runtime.79f17c27b335abc7aaf4.js 1.45 kB 3 [emitted] runtime
実行が import()
関数に達した場合にのみダウンロードします。
これにより、main
バンドルが小さくなり、初期読み込み時間が短縮されます。
さらに、キャッシュ保存も改善されます。メインチャンクのコードを変更する場合は、
コメントのチャンクには影響しません
関連情報
import()
の Webpack ドキュメント 関数import()
を実装するための JavaScript の提案 構文
コードをルートとページに分割する
アプリに複数のルートまたはページがあるものの、
コード(1 つの main
チャンク)で追加のバイトを処理している可能性が
できます。たとえば、ユーザーがサイトのホームページにアクセスしたとします。
記事をレンダリングするためのコードを読み込まなくても 表示されますが、読み込まれます。また、ユーザーが常に自宅を訪れるのであれば、 記事のコードに変更を加えると、webpack は ユーザーはアプリ全体を再ダウンロードする必要があります。
アプリをページに分割した場合(シングルページ アプリの場合はルート)、ユーザーは 関連するコードのみがダウンロードされます。また、ブラウザはアプリコードをキャッシュに保存します。 改善します。ホームページのコードを変更すると、webpack は チャンクに分割されます。
シングルページ アプリの場合
シングルページ アプリをルートごとに分割するには、import()
を使用します(
確認できます。」をご参照ください。フレームワークを使用する場合は、
次のような既存のソリューションがあるかもしれません。
- コード
分割しています」
react-router
のドキュメント(React 用) - 遅延読み込み
Routes" in
vue-router
のドキュメント(Vue.js 用)
従来の複数ページ アプリの場合
従来のアプリをページごとに分割するには、webpack のエントリを使用します。 。アプリに ホームページ、記事ページ、ユーザーアカウントページなど、 次の 3 つのエントリが必要です。
// webpack.config.js
module.exports = {
entry: {
home: './src/Home/index.js',
article: './src/Article/index.js',
profile: './src/Profile/index.js'
}
};
Webpack はエントリ ファイルごとに個別の依存関係ツリーを構築し、 そのエントリで使用されているモジュールのみを含むバンドル:
$ webpack
Hash: 318d7b8490a7382bf23b
Version: webpack 3.8.1
Time: 4273ms
Asset Size Chunks Chunk Names
./0.8ecaf182f5c85b7a8199.js 22.5 kB 0 [emitted]
./home.91b9ed27366fe7e33d6a.js 18 kB 1 [emitted] home
./article.87a128755b16ac3294fd.js 32 kB 2 [emitted] article
./profile.de945dc02685f6166781.js 24 kB 3 [emitted] profile
./vendor.4f14b6326a80f4752a98.js 46 kB 4 [emitted] vendor
./runtime.318d7b8490a7382bf23b.js 1.45 kB 5 [emitted] runtime
そのため、記事ページのみで Lodash を使用する場合、home
バンドルと profile
バンドルは
含まれず、ユーザーがライブラリをダウンロードする必要はありません。
ホームページにアクセスします
ただし、個別の依存関係ツリーには欠点があります。2 つのエントリ ポイントで
依存関係をベンダー バンドルに移動していない場合は、
Lodash のコピーが含まれます。この問題を解決するには、webpack 4 で
webpack の構成に optimization.splitChunks.chunks: 'all'
オプションを追加します。
// webpack.config.js (for webpack 4)
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
このオプションを使用すると、スマートコード分割が有効になります。このオプションを使用すると、webpack は自動的に 共通コードを探して個別のファイルに抽出します。
または、webpack 3 の場合: CommonsChunkPlugin
共通の依存関係を新しい指定したファイルに移動します。
module.exports = {
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: 2 // 2 is the default value
})
]
};
minChunks
の値を自由に試して、最適な値を見つけてください。通常、
小さく抑えながら、チャンク数が増えればサイズを大きくします。対象
たとえば、3 つのチャンクの場合、minChunks
は 2 になり、30 チャンクの場合は 8 になります。
2 のままにすると、あまりにも多くのモジュールが共通ファイルに入り込むためです。
膨らませすぎないことです
関連情報
- エントリのコンセプトに関するWebpack ドキュメント ポイント
- Webpack ドキュメント CommonsChunkPlugin
- 「 CommonsChunkPlugin"
optimization.splitChunks
とoptimization.runtimeChunk
の仕組み
モジュール ID の安定性を高める
コードのビルド時に、webpack は各モジュールに ID を割り当てます。後でこれらの ID は
バンドル内の require()
で使用されます。通常、ビルド出力には ID が表示されます。
モジュールパスの直前にあります。
$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
Asset Size Chunks Chunk Names
./0.8ecaf182f5c85b7a8199.js 22.5 kB 0 [emitted]
./main.4e50a16675574df6a9e9.js 60 kB 1 [emitted] main
./vendor.26886caf15818fa82dfa.js 46 kB 2 [emitted] vendor
./runtime.79f17c27b335abc7aaf4.js 1.45 kB 3 [emitted] runtime
↓ こちら
[0] ./index.js 29 kB {1} [built]
[2] (webpack)/buildin/global.js 488 bytes {2} [built]
[3] (webpack)/buildin/module.js 495 bytes {2} [built]
[4] ./comments.js 58 kB {0} [built]
[5] ./ads.js 74 kB {1} [built]
+ 1 hidden module
デフォルトでは、ID はカウンタを使用して計算されます(つまり、最初のモジュールは ID 0、 というようになります)。この方法の問題は、 新しいモジュールがモジュール リストの真ん中に表示され、 次のモジュールID:
$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
Asset Size Chunks Chunk Names
./0.5c82c0f337fcb22672b5.js 22 kB 0 [emitted]
./main.0c8b617dfc40c2827ae3.js 82 kB 1 [emitted] main
./vendor.26886caf15818fa82dfa.js 46 kB 2 [emitted] vendor
./runtime.79f17c27b335abc7aaf4.js 1.45 kB 3 [emitted] runtime
[0] ./index.js 29 kB {1} [built]
[2] (webpack)/buildin/global.js 488 bytes {2} [built]
[3] (webpack)/buildin/module.js 495 bytes {2} [built]
↓ 新たに追加された 説明します。
[4] ./webPlayer.js 24 kB {1} [built]
↓ 結果を見てみましょう。comments.js
の ID が 4 から 5 に変更されました
[5] ./comments.js 58 kB {0} [built]
↓ ads.js
の ID は 5 から 6 になりました
[6] ./ads.js 74 kB {1} [built]
+ 1 hidden module
これにより、ID が変更されたモジュールを含む、または依存するすべてのチャンクが無効になります。
コードを書き直す必要はありませんこの例では、0
チャンク(チャンク
comments.js
を含む)と main
チャンク(他のアプリコードを含むチャンク)が
main
のみにする必要があったため、無効化されました。
この問題を解決するには、モジュール ID の計算方法を変更します。
HashedModuleIdsPlugin
。
カウンタベースの ID をモジュールパスのハッシュに置き換えます。
$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
Asset Size Chunks Chunk Names
./0.6168aaac8461862eab7a.js 22.5 kB 0 [emitted]
./main.a2e49a279552980e3b91.js 60 kB 1 [emitted] main
./vendor.ff9f7ea865884e6a84c8.js 46 kB 2 [emitted] vendor
./runtime.25f5d0204e4f77fa57a1.js 1.45 kB 3 [emitted] runtime
↓ こちら
[3IRH] ./index.js 29 kB {1} [built]
[DuR2] (webpack)/buildin/global.js 488 bytes {2} [built]
[JkW7] (webpack)/buildin/module.js 495 bytes {2} [built]
[LbCc] ./webPlayer.js 24 kB {1} [built]
[lebJ] ./comments.js 58 kB {0} [built]
[02Tr] ./ads.js 74 kB {1} [built]
+ 1 hidden module
この方法では、モジュールの ID が変更されるのは、名前を変更または移動した場合だけです。 説明します。新しいモジュールは、他のモジュールには影響を与えません。できます。
プラグインを有効にするには、構成ファイルの plugins
セクションに追加します。
// webpack.config.js
module.exports = {
plugins: [
new webpack.HashedModuleIdsPlugin()
]
};
関連情報
- Webpack ドキュメント HashedModuleIdsPlugin
まとめ
- バンドルをキャッシュに保存し、バンドル名を変更してバージョンを区別する
- バンドルをアプリコード、ベンダーコード、ランタイムに分割
- ランタイムをインラインで使用して HTTP リクエストを保存する
import
を使用して重要でないコードを遅延読み込みする- ルート/ページごとにコードを分割して、不要なコンテンツを読み込まないようにする