Cache busting static files(images, pdf's, png etc.) in assets folder for angular application?

Question

Our application is developed using angular-cli (version: 7.0.2) & angular (version: 7.0.0). We have few image files, pdf's maintained in assets folder. These files change for every version of the app which releases every 3 months.

• What is the best way to achieve cache busting for all the files in assets folder?
• Is there a common technique which can be added to client app to load the latest of all files in assets folder whenever accessed? Is there any configuration which can be added in webpack.config.js (the file which gets generated when the project is created with angular-cli tool)?

I read through various techniques mentioned in this link: Refresh image with a new one at the same url

Not sure which is the best solution. Any suggestions / code snippets on how to implement cache busting is appreciated.

Answer 1

What is the best way to achieve cache busting for all the files in assets folder?

CDN || Server Cache

I think best way you can use hash name on your files, this way may change the current code.(image/file load path)

https://webpack.js.org/guides/caching/

Is there a common technique which can be added to client app to load the latest of all files in assets folder whenever accessed? Is there any configuration which can be added in webpack.config.js (the file which gets generated when the project is created with angular-cli tool)?

I think file-loader will help u.

If someone else have better solution ,i am interested in this problem too.