Moment For Technology

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

Posted on Aug. 6, 2022, 12:01 p.m. by 余雅琪
Category: The front end Tag: Performance optimization

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

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)

The optimal caching strategy for modern engineering architectures is different

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)

Specific operation

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:

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.