One, foreword

I did not build the project, but I was in charge of version upgrade. The code part of Webpack output was not reconstructed, so when it was published online, I found that THE HTML resources were updated, but the JS and CSS resources were not updated. My colleague asked the operation and maintenance to force the refresh, which is not advisable.

Ii. Problem analysis

This is because our online service uses CDN. When the client visits the page, the resource it gets is CDN cache resource, so it has not been updated. The CDN cache is not updated because the file name we package and output has not been changed, for example:

index.js
index.css
Copy the code

(XXX is a hash variable, which must be different from the hash generated in the previous version.)

index.xxx.js
index.xxx.css
Copy the code

HTML updates (such as HTML title updates that we can sense) are due to single-page applications where HTML does not go through CDN acceleration and has direct access to the latest resources.

Iii. Solutions

1. Pack the file name and hash. (Recommended) 2. Static resource file name binding depends on the version number. (Variable) 3. CDN nodes are forcibly refreshed. (Not recommended, more troublesome)