Une brève analyse du problème de la mise en cache des entrées dans Vue (partage de code)-Voir.js-php.cn

Une brève analyse du problème de la mise en cache des entrées dans Vue (partage de code)

奋力向前

Libérer： 2021-08-24 11:56:52

avant

1778 Les gens l'ont consulté

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.

Une brève analyse du problème de la mise en cache des entrées dans Vue (partage de code)

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

Copier après la connexion

为什么我们有时候设置了<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 &#39;no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0&#39;;
    if_modified_since off;
    expires off;
    etag off;
}

Copier après la connexion

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

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

no-storeMécanisme de mise en cache HTTP

Nous rencontrons souvent un problème lors du développement Nous contrôlons le problème de mise en cache en fonction du numéro de version. . Lorsque nous avons publié une nouvelle version et utilisé le numéro de version, nous avons constaté que le numéro de version cité dans html était un ancien numéro de version. Il s'est avéré que le fichier html était mis en cache à plusieurs reprises. jusqu'à interdire Le fichier html est mis en cache, mais il le sera toujours. rrreee

Pourquoi définissons-nous parfois <meta http-equiv=”Cache-control” content=”no-store”> 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-storeVous ne pouvez en définir qu'un seul🎜🎜no-cacheLe 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🎜🎜no-store</code.> Le navigateur ne met pas en cache L'actualisation de la page nécessite de retélécharger la page🎜🎜Apprentissage recommandé : 🎜Tutoriel vue.js🎜🎜

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!