Eine kurze Analyse des Problems des Eintrags-Caching in Vue (Code-Sharing)

Im vorherigen Artikel „Der HTTP-Caching-Mechanismus, den Sie kennen sollten (detaillierte Codeerklärung)“ haben wir etwas über den HTTP-Caching-Mechanismus gelernt. Der folgende Artikel wird Ihnen helfen, das Problem des Eintrags-Cachings in Vue zu verstehen.

Bezüglich der Caching-Strategie von web empfehle ich diesen Artikel: web的缓存策略,推荐这篇文章：Http缓存机制

在开发时候经常遇到一个问题，我们根据版本号去控制缓存问题，当我们发布新版本，使用心得版本号的时候，发现html里面引用的版本号却是旧的版本号 ，原来是该html文件被缓存了，很多时候我们设置禁止html文件被缓存,但依然会出现被缓存的情况。

<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" />

为什么我们有时候设置了<meta http-equiv=”Cache-control”content=”no-store”>这种强制性禁止缓存,我们的页面依然被缓存了？

因为我们只关注了客户端，却忽略了服务器端的设置，如果服务器端nginx设置了Cache-control，他是会覆盖掉我们页面中设置的的Cache-control的，所以有时候我们会发现明明css和js已经加了版本号，但是html文件里面引用的依然是旧的css和js文件

一旦我们使用了全量更新，也就是每次发版本之前会干掉之前的js和css文件，那么index.html会无法加载之前的js，css还有一些其他的静态资源文件，而新的js和css则不会被加载, 那么白屏就诞生了。

因为服务器的缓存机制，旧的css和js并不会被立即删除，这种情况下, 需要配合服务器来设置缓存，以nginx为例

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;
}

no-cache,no-store可以只设置一个

no-cache浏览器会缓存，但刷新页面或者重新打开时会请求服务器，服务器可以响应304，如果文件有改动就会响应200

no-storeHttp-Caching-Mechanismus

Während der Entwicklung stoßen wir häufig auf ein Problem. Wir steuern das Caching-Problem anhand der Versionsnummer Als wir eine neue Version veröffentlichten und die Versionsnummer verwendeten, stellten wir fest, dass die in html angegebene Versionsnummer eine alte Versionsnummer war bis zu verbieten Die HTML-Datei wird zwischengespeichert, wird aber weiterhin zwischengespeichert. rrreee

Warum setzen wir manchmal <meta http-equiv=“Cache-control“ content=“no-store“>, um das Caching zu erzwingen, unsere Seiten werden aber trotzdem bereits zwischengespeichert? 🎜🎜Weil wir uns nur auf den Client konzentrierten, aber die serverseitigen Einstellungen ignorierten. Wenn der serverseitige Nginx Cache-control festlegt, überschreibt er den Cache-control-Satz auf unserer Seite .control, daher werden wir manchmal feststellen, dass css und js Versionsnummern hinzugefügt haben, aber der alte wird immer noch in der HTML-Datei referenziert - und js-Dateien 🎜🎜Sobald wir das vollständige Update verwenden, d. h. die vorherigen js- und css-Dateien, werden vor jeder Version gelöscht freigegeben. code>-Datei, dann kann <code>index.html die vorherigen js-, css- und einige andere statische Ressourcendateien nicht laden Die neuen js und css werden nicht geladen und ein weißer Bildschirm wird angezeigt. 🎜🎜Aufgrund des Caching-Mechanismus des Servers werden die alten css und js nicht sofort gelöscht. In diesem Fall müssen Sie mit dem Server zusammenarbeiten, um den Cache einzurichten zu nginx als Beispiel🎜rrreee🎜no-cache,no-storeSie können nur einen festlegen🎜🎜no-cacheDer Browser speichert zwischen , aber aktualisieren Sie die Seite oder starten Sie den Server neu. Der Server kann mit 304 antworten. Wenn die Datei geändert wird, antwortet er mit 200🎜🎜no-store Das Aktualisieren der Seite erfordert ein erneutes Herunterladen der Seite🎜🎜Empfohlenes Lernen: 🎜vue.js-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Problems des Eintrags-Caching in Vue (Code-Sharing). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!