Details on version management for js file caching-Basic Knowledge-js tutorial

I have done many projects before, but I have never looked at js file caching. Recently, I finally jumped into this big hole without consciousness. My work in recent months is a continuous improvement project for the trading system. The iteration release cycle is about 2 ~ 3 weeks. The last iteration was V16, which was released on Wednesday. Unfortunately, the boss caught him the next morning. The boss found a bug in production. The general problem is as follows:

There is a common custom control in the system to help select customers. The continuous improvement requirement of V16 is to add two filtering options to the control and support different default configurations. A simple requirement and code modification are also simple. One modification adds an input parameter to a function in a js file to pass the configuration value. After RC and RTW tests, everything seems normal, but the bug was discovered only after the production. The loaded customers are obviously abnormal and the number is incorrect, which is inconsistent with the expected query configuration.

Check the internal jump link of the control and find that the passed parameters are obviously inconsistent with expectations. The link is generated by the JS function modified above. Therefore, the problem is that the client caches the original JS file, and the call of the new function is caused by the replacement of the old function. After the cache is cleared and the page is reloaded, the custom control works properly. Unfortunately, you cannot call every user to clear the cache before using this function.

At this time, I realized that a method is needed to control the JS cache. Otherwise, any modifications to the JS file content will be unable to obtain the latest JS file because of the cache, this causes a production accident.

In principle, we need to reload the JS file only when there is a JS update, instead of re-loading the file every time, therefore, the first method is not advisable to add random parameters to the JS application address, because it means that JavaScript will be reloaded almost every time the page is loaded, rather than using the cached JS reasonably. However, we still have the second more reasonable method. If you have followed some foreign website code, you will find that they usually add a version number parameter after the js link, instead of a random number, when the js Code is modified, you only need to add 1 to the version number to notify the client to update the js file. I don't know who is the first person to think of this method, but there is no doubt that he is worthy of our admiration. It's really a good idea!

Some code is provided: