Paris 2019 March 28-29

  1. Home
  2. Documentation
  3. Frontend
  4. Asset Versioning
WARNING: You are browsing the documentation for Symfony 4.0 which is not maintained anymore. Consider upgrading your projects to Symfony 4.1.

You are browsing the Symfony 4 documentation, which changes significantly from Symfony 3.x. If your app doesn't use Symfony 4 yet, browse the Symfony 3.4 documentation.

Asset Versioning

4.0 version
Maintained
3.4 4.1 current 4.2 master
Unmaintained
3.3

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 change, its hash will change, ignoring any existing cache:

1
2
3
4
5
6
7
// webpack.config.js
// ...

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

To link to these assets, Encore creates a manifest.json file with a map to the new filenames.

Loading Assets from the manifest.json File

Whenever you run Encore, a manifest.json file is automatically created in your outputPath directory:

1
2
3
4
{
    "build/app.js": "/build/app.123abc.js",
    "build/dashboard.css": "/build/dashboard.a4bf2d.css"
}

In your app, you need to read this file to dynamically render the correct paths in your script and link tags. If you're using Symfony, just activate the json_manifest_file versioning strategy:

1
2
3
4
5
6
# config/packages/framework.yaml
framework:
    # ...
    assets:
        # feature is supported in Symfony 3.3 and higher
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

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

1
2
3
<script src="{{ asset('build/app.js') }}"></script>

<link href="{{ asset('build/dashboard.css') }}" rel="stylesheet" />

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.