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 of web, 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 in html is the old version number. , it turns out that the html file has been cached. Many times we set it to prohibit the html file from being cached, but it still happens to be cached.

<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache" content="no-cache" />

Why do we sometimes set <meta http-equiv=”Cache-control” content=”no-store”>This 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 sets Cache-control, it will overwrite the ## settings on our page. #Cache-control, so sometimes we will find that the version numbers of css and js have been added, but the old is still referenced in the html file. css and js files

Once we use full update, that is, the previous

js and css# will be deleted before each version is released. ## file, then index.html will not be able to load the previous js, css and some other static resource files, and the new js and css will not be loaded, and a white screen will appear. Due to the caching mechanism of the server, the old

css

and js will not be deleted immediately. In this case, you need to cooperate with the server to set up the cache tonginxFor example<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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 &amp;#39;no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0&amp;#39;; if_modified_since off; expires off; etag off; }</pre><div class="contentsignin">Copy after login</div></div>no-cache,no-store<p>You can only set one<code>

no-cache

The browser will Caching, but the server will be requested when refreshing the page or reopening it. The server can respond 304. If the file is changed, it will respond 200##no-store

The browser does not cache, refreshing the page requires re-downloading the page

Recommended learning: vue.js tutorial

The above is the detailed content of A brief analysis of the problem of entry caching in Vue (code sharing). For more information, please follow other related articles on the PHP Chinese website!