Today’s topic is also the knowledge I used in my recent project. Forgive me for being a chicken for less than two years. The thing is, one day my father and I talked about customer recently after each new release they found often stay open the portal on a version of the content, and Ctr + R didn’t also the way to the latest version, finally can only be forced to refresh or clear the cache refresh to solve it, this problem is put forward, I feel the customer is to make things ah, How many iterations have not raised this issue, in line with the principle that the customer is God, this issue has to be solved, and it does affect the user experience, should should… The question is raised, my first reaction is to should not be ah, in accordance with the React webpack packaging, the new version package is bringing the hash, each time you refresh to pull should be of the latest, because I also am halfway to participate in, so with the question mark to see some of the project configuration, webpack normal configuration, The client strictly implemented the CI/CD process of GitLab, so I did not pack by myself. I manually packaged to verify that Webpack is really normal… This happened to me when I was working on iOS native development and accessing someone else’s H5 web page. My colleagues at the back end told me to add the current timestamp suffix to the link so that it would be the latest link each time, which was a rude solution that was obviously not appropriate for the current project.
Now back to this topic, browser caching strategies, before we explore this we need to know a common interview question, what happens when you enter the link in the address bar and go to the home page? It can be better understood if we understand this. Simply speaking, we get the IP address and port of the server after DNS resolution, and download the HTML file of our project under this IP and port, which is usually index. HTML, which is also the content we package. Browser will parse the HTML file, the file while it is when you meet the CSS and js files are executed immediately download these two files, if there is asynchronous configuration then follow the steps of asynchronous download, among this through lexical analysis, syntax parsing and a series of steps and form our home page, to be interested in baidu to explore the mysteries of the middle, That’s the simple answer to the above question. What does the browser’s caching strategy have to do with this question? The browser cache is above these files, HTML, CSS, js file and media resources, such as pictures, I search on the Internet browser’s cache knowledge all the answer finally found a very comprehensive and very real – zhuanlan.zhihu.com/p/44789005 article, This article introduces in detail the common cache strategy, strong cache, negotiated cache, serviceWoker(this is more advanced, do not need to use it), you need to go to check, next talk about my practice and step on the hole.
If the HTML file does not change, the browser will return 304. If the HTML file does not change, the browser will return 304. Set the cache time for JS and CSS files to 1 hour,max-age=3600. Avoid downloading files every time you refresh. There is no need to worry about cache affecting the update, because if the project changes, Webpack will give a new hash suffix. When the browser to the two files found path has changed also to download file, which is why set to HTML is not the cause of the cache, so you can ensure that if we have the change will be to download the latest content, my project with the nginx proxy, so only in nginx configuration to configure the caching policy, Here’s the picture:
In Google’s debug panel, you can see the cache policy as shown below:
For this HTML file download, you can see the Settings in the red box in effect:
This is the configuration of the js file, you can see max-age:
After finishing the above cache strategy, I worked with QA and the client’s father to test the effect. After several rounds of testing, the conclusion was as follows: CTRL +R, CTRL + Shift +R, CTRL + Shift +R, clear cache and force refresh all three operations will immediately get the latest version of the content, it is important to note that I tested in Google Browser, browser, these three operations corresponding to the cache mechanism will be a small difference, this is up to your own choice.
Finished these thought can happy touch fish, the customer found that the picture resources did not update… Should not, if the picture does change, webpack will also add hash suffix after the picture, webpack configuration must be ok, I packed again to look at the package content, found that all the packaged pictures did not have hash suffix. Ri got the dog… Every time you replace the image, you will not change the name of the image. Who is idle to change the name? The reason is that the client put all the images in the Public directory, which is the following directory:
The advantage of this is that you do not need to write relative paths when setting image SRC, such as various.. /.. /.. If most of the image resources in the project are not changed very often, it is not a problem to put them in this directory. When webpack images, the default is to start from the SRC directory, so the image resources are not processed by Webpack. That finally changed the loading path of all image resources in the project, drudgery… In addition to hash, webpack also has the intervention of url-loader and file-loader. The url-loader plug-in can automatically transform your image into Base64 when the size is smaller than what, so that the image resources are packaged in the code. Do not download image resources to save traffic. If there are many small pictures in the project, it will also cause the size of the whole package to become larger, which may also have a negative effect. Please arrange by yourself.
When I thought I finally can touch fish, I am still too underestimate customers the ability to do things, because the project is still in internal iteration, hair version is very frequent, after each update to the customer wants to know the current version of the build time and recently updated versions of their own time, don’t spray customer, my customer is to develop, he wants to see the development important content, In fact, using version number to record is the most vivid expression, but considering that the client will not provide version number management function, we should consider updating version in package.json by ourselves. This scheme was also rejected, because we have to manually change the version before each update, which is easy to be confused, and other colleagues work on the project together, which is difficult to manage. Save the time of each package directly by setting scripts as follows:
Create build time and update time logic in the index.js entry file
Here is the end of this theme, I hope to help you in need, what questions can leave a message, we discuss together.