How to determine the best caching strategy for front-end resources?

Posted on April 19, 2023, 10:31 a.m. by 余雅琪

How to determine the best caching strategy for front-end resources? What do you mean?

There are many types of resources on the front end such as.js.css.png index.html

The cache time policy should be different for different resources

For example, the image is not changed, and the Cache time can be more than a year (for details on how to set the Cache, see the sister browser Cache- cache-control).

How to determine the best caching strategy

The best criteria are based on the frequency of resource changes

	Html	Css and js	The picture
frequency	It may change frequently and needs to be asked each time.	May be modified monthly	Almost the same
Cache-Control	private, no-cache	Public, max-age=2592000	Public, max-age=31536000 (year), stale-while-revalidate=86400
Invalidate the cache	Ask every time to make sure it's up to date	Automatic expiration or name change (hash value)	Automatic expiration or name change (hash value)

Background: Any CSS or JS file that has a change will automatically change the file name (hash value) through Webpack or other packaging tools.

The optimal cache policy for this project can be set as:

	Html	Css and js	The picture
frequency	It may change frequently and needs to be asked each time.	May be modified monthly	Almost the same
Cache-Control	private, no-cache	Public, max-age=31536000 (A year or even forever)	Public, max-age=31536000 (year or even permanent), stale-while-revalidate=86400
Invalidate the cache	Ask every time to make sure it's up to date	Change the name (hash value)	Change the name (hash value)

Change the nginx configuration, set the response header, cache-control: max-age: xx

Within the company, you can ask oM to change and tell OM which types of resources correspond to which caching policies

Code word is not easy, praise encouragement

Performance optimization set quick entry: