Vue(코드 공유)의 항목 캐싱 문제에 대한 간략한 분석

이전 기사 "당신이 알아야 할 HTTP 캐싱 메커니즘(자세한 코드 설명)"에서 우리는 HTTP 캐싱 메커니즘에 대해 배웠습니다. 다음 글은 Vue의 항목 캐싱 문제를 이해하는 데 도움이 될 것입니다.

웹의 캐싱 전략과 관련하여 다음 문서를 추천합니다. 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 캐싱 메커니즘

개발 중에 종종 문제가 발생합니다. 우리는 버전 번호를 기준으로 캐싱 문제를 제어합니다. . 새 버전을 출시하고 버전 번호를 사용했을 때 html에 인용된 버전 번호가 이전 버전 번호인 것을 발견했습니다. html 파일이 여러 번 캐시된 것으로 나타났습니다. 를 금지하려면 html 파일이 캐시되지만 여전히 캐시됩니다. rrreee

왜 가끔 <meta http-equiv=”Cache-control” content=”no-store”>를 설정하여 캐싱을 강제하는데도 페이지가 이미 캐시되어 있는 이유는 무엇인가요? 🎜🎜우리는 클라이언트에만 집중하고 서버 측 설정을 무시했기 때문에 서버 측 nginx가 Cache-control을 설정하면 우리 페이지에 설정된 Cache-control을 덮어쓰게 됩니다. .control이므로 css 및 js에 버전 번호가 추가되었지만 html 파일에서는 여전히 이전 가 참조되는 경우가 있습니다. 및 js 파일 🎜🎜전체 업데이트를 사용하면 각 버전이 업데이트되기 전에 이전 js 및 css가 삭제됩니다. release.code> 파일을 삭제하면 <code>index.html은 이전 js, css 및 기타 정적 리소스 파일을 로드할 수 없습니다. 새로운 js와 css가 로드되지 않고 흰색 화면이 나타납니다. 🎜🎜서버의 캐싱 메커니즘으로 인해 이전 css 및 js는 즉시 삭제되지 않습니다. 이 경우 캐시를 설정하려면 서버에 협조해야 합니다. 예를 들어 nginx에🎜rrreee🎜no-cache,no-store한 개만 설정할 수 있습니다🎜🎜no-cache브라우저가 캐시합니다. , 그러나 페이지를 새로 고치거나 다시 시작하면 서버가 304를 응답할 수 있습니다. 파일이 변경되면 200🎜🎜no-store 브라우저는 캐시하지 않습니다. 페이지를 새로 고치려면 페이지를 다시 다운로드해야 합니다🎜🎜권장 학습: 🎜vue.js tutorial🎜🎜

위 내용은 Vue(코드 공유)의 항목 캐싱 문제에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!