このページは Cloud Translation API によって翻訳されました。

長期キャッシュ保存を利用する

webpack がアセットキャッシュをサポートする仕組み

Ivan Akulov

アプリのサイズを最適化した後、キャッシュ保存がアプリの読み込み時間を短縮しますこれを使用して、アプリの一部を毎回再ダウンロードする必要はありません

バンドルのバージョニングとキャッシュヘッダーを使用する

キャッシュ保存の一般的なアプローチは次のとおりです。

ファイルをかなり長い期間（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"
}

依存関係とランタイムを別のファイルに抽出する

依存関係

アプリの依存関係は、実際のアプリコードよりも頻繁に変更されない傾向があります。引っ越した場合別のファイルにまとめると、ブラウザはそれらを個別にキャッシュできます。ダウンロードされ、アプリコードが変更されるたびに再ダウンロードされることはありません。

依存関係を別のチャンクに抽出するには、次の 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>

余分な 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 バンドルが小さくなり、初期読み込み時間が短縮されます。さらに、キャッシュ保存も改善されます。メインチャンクのコードを変更する場合は、コメントのチャンクには影響しません

注: このコードを Babel でコンパイルすると、Babel は初期状態で import() を認識できないため、構文エラーが発生します。エラーを回避するには、syntax-dynamic-import プラグインを追加します。

コードをルートとページに分割する

アプリに複数のルートまたはページがあるものの、コード（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 のままにすると、あまりにも多くのモジュールが共通ファイルに入り込むためです。膨らませすぎないことです

モジュール 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()
  ]
};

まとめ

バンドルをキャッシュに保存し、バンドル名を変更してバージョンを区別する
バンドルをアプリコード、ベンダーコード、ランタイムに分割
ランタイムをインラインで使用して HTTP リクエストを保存する
import を使用して重要でないコードを遅延読み込みする
ルート/ページごとにコードを分割して、不要なコンテンツを読み込まないようにする

長期キャッシュ保存を利用する

バンドルのバージョニングとキャッシュヘッダーを使用する

関連情報

依存関係とランタイムを別のファイルに抽出する

依存関係

Webpack ランタイムコード

関連情報

余分な HTTP リクエストを保存するインライン webpack ランタイム

HTMLWebpackPlugin を使用して HTML を生成する場合

カスタムサーバーロジックを使用して HTML を生成する場合

現時点で不要なコードの遅延読み込み

関連情報

コードをルートとページに分割する

シングルページアプリの場合

従来の複数ページアプリの場合

関連情報

モジュール ID の安定性を高める

関連情報

まとめ

長期キャッシュ保存を利用する

バンドルのバージョニングとキャッシュ ヘッダーを使用する

関連情報

依存関係とランタイムを別のファイルに抽出する

依存関係

Webpack ランタイム コード

関連情報

余分な HTTP リクエストを保存するインライン webpack ランタイム

HTMLWebpackPlugin を使用して HTML を生成する場合

カスタム サーバー ロジックを使用して HTML を生成する場合

現時点で不要なコードの遅延読み込み

関連情報

コードをルートとページに分割する

シングルページ アプリの場合

従来の複数ページ アプリの場合

関連情報

モジュール ID の安定性を高める

関連情報

まとめ

バンドルのバージョニングとキャッシュヘッダーを使用する

Webpack ランタイムコード

カスタムサーバーロジックを使用して HTML を生成する場合

シングルページアプリの場合

従来の複数ページアプリの場合