From now on, most JavaScript files in Liferay DXP have hashed file names generated at build time. For example, a main.js file may appear at runtime with a randomly generated hash value in its name, such as main.(tvERyCVfuRc).js.

This hash value represents a unique version of the file, so the browser can identify that the file’s contents have not changed. This allows the file to remain in the browser cache indefinitely when the infinite caching strategy is selected.

In addition, the frontend caching infrastructure now supports both infinite caching and time/validation-based caching strategies. These strategies can be configured through Instance Settings.

For those JavaScript files that cannot be hashed because they are generated at runtime by the server depending on some parameters, a new configuration is available in DXP to define their TTL and the option to add the no-cache header. This ensures the revalidation of the asset with the server before being served.

Also, hashed files have a fallback strategy based on TTL + eTag if they are requested using their canonical name. This acts as a fallback for import map errors or legacy portlets that are not aware of hashed file names.

Key Benefits:

The new Liferay DXP caching strategy for JavaScript files improves performance and stability.

1. Faster Page Loads:
Significant reduction in subsequent load times.

2. Elimination of Stale Resources:
Hashed URLs prevent users from seeing outdated JavaScript after an update.

3. Reduced Origin Server Load:
Less server overhead, as browsers retrieve unchanged files directly from their local cache, saving CPU and bandwidth.

4. Cache busting:
Updated resources automatically force the browser to fetch the new version by changing the file name hash whenever the content changes.