Skip to content

Fingerprint assets #22510

Closed
Closed
@acalvo

Description

@acalvo

🚀 Feature request

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Description

Angular CLI fingerprints the generated JS output (for example main.d64e98daf9464b95.js) which works great with aggressive cache strategies in a CDN.

In the other hand for assets such as images, the recommended way of dealing with them is to put them in a special folder which Angular CLI copies as-is when building the app. This means that there is no fingerprint and thus causes problems with CDNs cache, as can't know if the requested file changed since last request.

Describe the solution you'd like

A way of fingerprinting assets such as images that works with Angular CLI.

Describe alternatives you've considered

We used to use some webpack tricks but none of them work by Angular CLI 13.1.

We also use a Service Worker but doesn't solve the problem: it does keep track of the changes and knows if a non-figerprinted resource changed (as it stores its hash in ngsw.json) BUT when it has changed and it's requested to the CDN, the CDN doesn't know about this and can't decide whether it can serve the cached version, or should request a fresh version of it. If it was fingerprinted, as they'd be different filenames, there would be no problems with the cache.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions