Maison > Article > interface Web > Une brève analyse du problème de la mise en cache des entrées dans Vue (partage de code)
Dans l'article précédent "Le mécanisme de mise en cache HTTP que vous méritez de connaître (explication détaillée du code)", nous avons découvert le mécanisme de mise en cache HTTP. L'article suivant vous aidera à comprendre le problème de la mise en cache des entrées dans Vue. Venez y jeter un œil.
Concernant la stratégie de mise en cache du web
, je vous recommande cet article : 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" />
为什么我们有时候设置了f351569b22943d200c75ad4268539142
这种强制性禁止缓存,我们的页面依然被缓存了?
因为我们只关注了客户端,却忽略了服务器端的设置,如果服务器端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-store
Mécanisme de mise en cache HTTP
3dfc6a0f02a2289f11cf6b82e2110882
pour forcer la mise en cache, mais nos pages sont toujours en cache déjà ? 🎜🎜Parce que nous nous sommes concentrés uniquement sur le client, mais avons ignoré les paramètres côté serveur. Si le nginx côté serveur définit Cache-control
, il écrasera le Cache-control défini dans notre page. . control
, donc parfois nous constaterons que css
et js
ont des numéros de version ajoutés, mais l'ancien est toujours référencé dans le fichier html. Fichiers
et js
🎜🎜Une fois que nous aurons utilisé la mise à jour complète, c'est-à-dire que les js
et css précédents seront supprimés avant que chaque version ne soit publié. code>, alors <code>index.html
ne pourra pas charger les fichiers js
, css
précédents et certains autres fichiers de ressources statiques, et les nouveaux js
et css
ne seront pas chargés et un écran blanc apparaîtra. 🎜🎜En raison du mécanisme de mise en cache du serveur, les anciens css
et js
ne seront pas supprimés immédiatement. Dans ce cas, vous devez coopérer avec le serveur pour configurer le cache. à nginx
à titre d'exemple🎜rrreee🎜no-cache,no-store
Vous ne pouvez en définir qu'un seul🎜🎜no-cache
Le navigateur mettra en cache , mais actualisez la page ou redémarrez A l'ouverture, le serveur sera demandé. Le serveur peut répondre 304
Si le fichier est modifié, il répondra 200
🎜🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!