Asset Versioning

Tired of deploying and having browser's cache the old version of your assets? By calling enableVersioning(), each filename will now include a hash that changes whenever the contents of that file change (e.g. app.123abc.js instead of app.js). This allows you to use aggressive caching strategies (e.g. a far future Expires) because, whenever a file changes, its hash will change, ignoring any existing cache:

アセットの古いバージョンをデプロイしてブラウザーのキャッシュに入れるのにうんざりしていませんか?enableVersioning() を呼び出すと、ファイルの内容が変更されるたびに変更されるハッシュが各ファイル名に含まれるようになります (たとえば、app.js ではなく app.123abc.js)。これにより、ファイルが変更されるたびにハッシュが変更され、既存のキャッシュが無視されるため、積極的なキャッシュ戦略 (たとえば、遠い将来の期限切れ) を使用できます。
1
2
3
4
5
6
7
 
// webpack.config.js

  // ...
  Encore
      .setOutputPath('public/build/')
      // ...
+     .enableVersioning()

To link to these assets, Encore creates two files entrypoints.json and manifest.json.

これらのアセットにリンクするために、Encore は entrypoints.json と manifest.json の 2 つのファイルを作成します。

Loading Assets from entrypoints.json & manifest.json

Whenever you run Encore, two configuration files are generated in your output folder (default location: public/build/): entrypoints.json and manifest.json. Each file is similar, and contains a map to the final, versioned filenames.

Encore を実行すると、出力フォルダー (デフォルトの場所: public/build/) に entrypoints.json と manifest.json の 2 つの構成ファイルが生成されます。各ファイルは類似しており、最終的なバージョン化されたファイル名へのマップが含まれています。

The first file – entrypoints.json – is used by the encore_entry_script_tags() and encore_entry_link_tags() Twig helpers. If you're using these, then your CSS and JavaScript files will render with the new, versioned filename. If you're not using Symfony, your app will need to read this file in a similar way.

最初のファイル – entrypoints.json – は、encore_entry_script_tags() および encore_entry_link_tags() Twig ヘルパーによって使用されます。これらを使用している場合、CSS および JavaScript ファイルは新しいバージョン管理されたファイル名でレンダリングされます。 Symfony を使用していない場合、アプリは同様の方法でこのファイルを読み取る必要があります。

The manifest.json file is only needed to get the versioned filename of other files, like font files or image files (though it also contains information about the CSS and JavaScript files):

manifest.json ファイルは、フォント ファイルや画像ファイルなど、他のファイルのバージョン管理されたファイル名を取得するためにのみ必要です (ただし、CSS および JavaScript ファイルに関する情報も含まれています)。
1
2
3
4
5
 
{
    "build/app.js": "/build/app.123abc.js",
    "build/dashboard.css": "/build/dashboard.a4bf2d.css",
    "build/images/logo.png": "/build/images/logo.3eed42.png"
}

In your app, you need to read this file if you want to be able to link (e.g. via an img tag) to certain assets. If you're using Symfony, just activate the json_manifest_file versioning strategy:

アプリで、特定のアセットに (img タグなどを介して) リンクできるようにする場合は、このファイルを読み取る必要があります。 Symfony を使用している場合は、json_manifest_file バージョン管理戦略を有効にするだけです。
1
2
3
4
5
 
# this file is added automatically when installing Encore with Symfony Flex
# config/packages/assets.yaml
framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

That's it! Be sure to wrap each path in the Twig asset() function like normal:

それでおしまい！通常のように Twig asset() 関数で各パスを必ずラップしてください。
1
 
<img src="{{ asset('build/images/logo.png') }}" alt="ACME logo">

Troubleshooting

Asset Versioning and Deployment

When deploying a new version of your application, versioned assets will include a new hash, making the previous assets no longer available. This is usually not a problem when deploying applications using a rolling update, blue/green or symlink strategies.

アプリケーションの新しいバージョンをデプロイすると、バージョン管理されたアセットに新しいハッシュが含まれるため、以前のアセットは使用できなくなります。これは通常、ローリング アップデート、青/緑またはシンボリック リンク戦略を使用してアプリケーションをデプロイする場合には問題になりません。

However, even when applying those techniques, there could be a lapse of time when some publicly/privately cached response requests the previous version of the assets. If your application can't afford to serve any broken asset, the best solution is to use a CDN (or custom made service) that keeps all the old assets cached for some time.

ただし、これらの手法を適用した場合でも、パブリック/プライベートにキャッシュされた応答がアセットの以前のバージョンを要求する場合、時間が経過する可能性があります。アプリケーションが破損したアセットを提供する余裕がない場合、最善の解決策は、すべての古いアセットをしばらくの間キャッシュに保持する CDN (またはカスタム サービス) を使用することです。

Learn more