CSS, JS resources tag versioning for cache busting

When new versions of CSS or JS resource files are uploaded to a live page, properly set up cache settings often take more than 2 weeks until the browser reloads the files.

I recently saw the strategy to add a query string to a CSS resource in the HTML tag like this:

<link rel="stylesheet" href="style.css?v=12345678">

The query string “?v=xxxx” should be automatically produced by the filemtime of the file.

This ensures, that the file can be cached until it changes and “busts” it own cache automatically.
So no browser would ever show a wrong version.

How could I implement this in NEOS?

Assuming you have your CSS/JS somewhere in your site packages Resources/Public folder,
the most straightforward way would be, to create an own ResourceManagement Target, most likely by just extending the FileSystemSymlinkTarget.
Then overwrite the getPublicStaticResourceUri() method, to return an URI that contains a version parameter.

Then configure that Target for your Neos.Flow.resource.targets.localWebDirectoryStaticResourcesTarget in your Settings.yaml and use {f:uri.resource()} viewhelper in your templates or equivalent Fusion, if you don’t do that already.

If you have your assets stored somewhere else, you can still do it that way, but you need to define the resource collection, storage and target yourself and configure everything to make it work.

Hello Marvin,

you could have a look at some of the existing “cache buster” packages for Flow, like https://github.com/Flowpack/Flowpack.CacheBuster or https://github.com/mindscreen/flow-cachebreak

1 Like