A brief analysis of the problem of entry caching in Vue (code sharing)

In the previous article "The HTTP caching mechanism you deserve to know (detailed code explanation)", we learned about the HTTP caching mechanism. The following article will help you understand the problem of entry caching in Vue. Let's take a look.

Regarding the caching strategy ofweb, I recommend this article:Http Cache Mechanism

We often encounter a problem during development. We control caching issues based on the version number. When we release a new version and use the version number, we find that the version number quoted inhtmlis the old version number. , it turns out that the html file has been cached. Many times we set it to prohibit thehtmlfile from being cached, but it still happens to be cached.

Why do we sometimes setThis kind of mandatory prohibition of caching, our page Still cached?

Because we only focused on the client, but ignored the server-side settings. If the server-side nginx setsCache-control, it will overwrite the ## settings on our page. #Cache-control, so sometimes we will find that the version numbers ofcssandjshave been added, but the oldis still referenced in the html file. cssandjsfiles

jsandcss# will be deleted before each version is released. ## file, thenindex.htmlwill not be able to load the previousjs,cssand some other static resource files, and the newjsandcsswill not be loaded, and a white screen will appear.Due to the caching mechanism of the server, the old

andjswill not be deleted immediately. In this case, you need to cooperate with the server to set up the cache tonginxFor example

location / { root /home/www/test/dist; index index.html; try_files $uri $uri/ /index.html; add_header Last-Modified $date_gmt; add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0'; if_modified_since off; expires off; etag off; }