이전 기사 "당신이 알아야 할 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" />
为什么我们有时候设置了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
Http 캐싱 메커니즘
3dfc6a0f02a2289f11cf6b82e2110882
를 설정하여 캐싱을 강제하는데도 페이지가 이미 캐시되어 있는 이유는 무엇인가요? 🎜🎜우리는 클라이언트에만 집중하고 서버 측 설정을 무시했기 때문에 서버 측 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!