매개 변수를 통한 캐시 버스 팅
우리는 프로덕션 배포시 버스트를 캐싱하고 싶지만 그렇게하는 데 필요한 시스템을 파악하는 데 많은 시간을 허비하지는 않습니다. 내 생각은 현재 버전 번호로 css 및 js 파일 끝에 매개 변수를 적용하는 것이 었습니다.
<link rel="stylesheet" href="base_url.com/file.css?v=1.123"/>
두 가지 질문 : 캐시가 효과적으로 중단됩니까? param이 브라우저가 해당 URL의 응답을 캐시하지 않도록합니까?
이 매개 변수 ?v=1.123는 쿼리 문자열을 나타내므로 브라우저는이 문자열이 새로운 경로라고 생각합니다 ?v=1.0. 따라서 캐시가 아닌 파일에서로드됩니다. 원하는대로.
그리고, 브라우저는 소스 당신이 전화 같은 다음에 남아있을 것입니다 가정합니다 ?v=1.123및 합니다 해당 문자열로 캐시를. 따라서 캐시 된 상태로 유지되지만 이동 할 때까지 서버가 설정됩니다 ?v=1.124.
두 가지 질문 : 캐시가 효과적으로 중단됩니까?
예. 스택 오버플로 조차도이 방법을 사용 하지만 (수백만 명의 방문자와 다른 클라이언트 및 프록시 버전 및 구성의 수백만 명의 사용자가 있음) 캐시를 깨기에 충분하지 않은 몇 가지 놀라운 경우가 있음을 기억합니다. 그러나 일반적인 가정은 이것이 효과가 있으며 클라이언트에서 캐싱을 중단하는 데 적합한 방법이라는 것입니다.
param이 브라우저가 해당 URL의 응답을 캐시하지 않도록합니까?
아니요. 매개 변수는 캐싱 정책을 변경하지 않습니다. 서버가 전송 한 캐싱 헤더는 여전히 적용되며, 전송하지 않으면 브라우저의 기본값입니다.
실제 파일 이름에 버전 번호를 입력하는 것이 더 안전합니다. 이를 통해 한 번에 여러 버전이 존재할 수 있으므로 새 버전을 롤아웃 할 수 있으며 이전 버전을 요청하는 캐시 된 HTML 페이지가 여전히 존재하면 HTML과 호환되는 버전을 얻게됩니다.
인터넷 어디에서나 가장 큰 버전의 배포 중 하나에서 jQuery는 실제 파일 이름의 버전 번호를 사용하며 특별한 서버 측 논리없이 여러 버전이 공존 할 수 있습니다 (각 버전은 다른 파일 임).
새 페이지와 링크 된 새 파일 (원하는 파일)을 배포 할 때 캐시가 한 번 중단 된 다음 해당 버전에서 효과적으로 캐시 될 수 있습니다 (원하는 파일).
다른 사람들이 말했듯이 쿼리 매개 변수를 사용한 캐시 버스 팅은 일반적으로 나쁜 생각 (tm)으로 간주되어 오랫동안 사용되었습니다. 파일 이름에 버전을 반영하는 것이 좋습니다. Html5 Boilerplate 은 특히 쿼리 문자열 사용을 권장하지 않습니다 .
즉, 출처를 인용 한 권장 사항 중에서 모두 Steve Souders 의 2008 기사 에서 지혜를 얻은 것으로 보입니다 . 그의 결론은 당시 프록시의 행동에 기초하고 있으며 요즘 관련성이 있거나 없을 수도 있습니다. 여전히 최신 정보가 없으면 파일 이름을 변경하는 것이 안전한 옵션입니다.
클라이언트가 리소스를 다운로드 한 후 다음과 같은 경우를 제외하고는 모든 다른 응답이 클라이언트 캐시에서 제공됩니다.
- v 매개 변수가 업데이트됩니다.
- 클라이언트가 캐시를 지 웁니다.
일반적으로 이는 문제가되지 않지만 요청 매개 변수를 무시하도록 구성된 중간 캐시 (프록시)가있는 경우에는 작동하지 않을 수 있습니다.
예를 들어 Akamai CDN을 통해 정적 컨텐츠를 제공하는 경우이 메소드를 사용하여 캐시 버스 팅을 방지하기 위해 요청 매개 변수를 무시하도록 구성 할 수 있습니다.
캐싱을 얼마나 강력하게 원하는지에 따라 다릅니다. 예를 들어, 오징어 프록시 서버 (및 기타)는 기본적으로 쿼리 문자열과 함께 제공되는 URL을 캐싱 하지 않도록 설정되어 있습니다. 불필요한 캐시 누락을 유발하는 특정 사용 사례를 신경 쓰지 않으면 쿼리 매개 변수로 진행하십시오. 그러나이 문제를 피하는 파일 이름 기반 캐시 버스 팅 구성표를 설정하는 것은 매우 쉽습니다.
여기에서 두 가지 기술 (쿼리 문자열 대 파일 이름)의 비교를 찾았 습니다 .
쿼리 문자열로서의 버전에는 두 가지 문제가 있습니다.
첫째, 항상 캐싱을 구현하는 브라우저가 아닐 수도 있습니다. 특정 프록시 (아마도 오래된 프록시)는 캐싱 동작과 관련하여 쿼리 문자열을 무시한다고합니다.
둘째, 여러 프런트 엔드 및 / 또는 여러 백엔드 서버가있는보다 복잡한 특정 배포 시나리오에서는 업그레이드가 즉시 수행됩니다. 이전 버전과 새 버전의 자산을 동시에 제공 할 수 있어야합니다. 예를 들어 Google App Engine을 사용할 때 이것이 어떻게 영향을 미치는지 참조하십시오.
다른 유사한 방법은 htaccess mod_rewrite 를 사용 하여 파일을 제공 할 때 경로의 일부를 무시하는 것입니다. 캐시되지 않은 색인 페이지는 파일의 최신 경로를 참조합니다.
개발 관점에서는 버전 번호에 매개 변수를 사용하는 것이 쉽지만 파일 이름 접근 방식만큼 강력합니다.
버전 번호의 경로에서 무시 된 부분을 사용하면 서버는이를 무시하고 캐시되지 않은 파일을 제공합니다.
1.2.3/css/styles.csscss/styles.css첫 번째 디렉토리가 htaccess 파일에 의해 제거되고 무시되므로 동일한 파일을 제공 합니다.
버전이 지정된 파일 포함
<?php
$version = "1.2.3";
?>
<html>
<head>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="<?php echo $version ?>/css/styles.css">
</head>
<body>
<script src="<?php echo $version ?>/js/main.js"></script>
</body>
</html>
이 방법은 인덱스 페이지의 캐싱을 비활성화해야한다는 것을 의미합니다. <meta> 태그를 사용하여 모든 브라우저에서 캐싱을 해제 하시겠습니까?
.htaccess 파일
RewriteEngine On
# if you're requesting a file that exists, do nothing
RewriteCond %{REQUEST_FILENAME} !-f
# likewise if a directory that exists, do nothing
RewriteCond %{REQUEST_FILENAME} !-d
# otherwise, rewrite foo/bar/baz to bar/baz - ignore the first directory
RewriteRule ^[^/]+/(.+)$ $1 [L]
URL 재 작성을 허용하는 모든 서버 플랫폼에서 동일한 접근 방식을 취할 수 있습니다
( mod_rewrite 에서 수정 된 재 작성 조건 -디렉토리를 / #! /를 제외한 조회 문자열로 재 작성 )
... and if you need cache busting for your index page / site entry point, you could always use JavaSript to refresh it.
<script type="text/javascript">
// front end cache bust
var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];
for (i=0; i < cacheBust.length; i++){
var el = document.createElement('script');
el.src = cacheBust[i]+"?v=" + Math.random();
document.getElementsByTagName('head')[0].appendChild(el);
}
</script>
<script>
var storedSrcElements = [
"js/exampleFile.js",
"js/sampleFile.js",
"css/style.css"
];
var head= document.getElementsByTagName('head')[0];
var script;
var link;
var versionNumberNew = 4.6;
for(i=0;i<storedSrcElements.length;i++){
script= document.createElement('script');
script.type= 'text/javascript';
script.src= storedSrcElements[i] + "?" + versionNumberNew;
head.appendChild(script);
}
</script>
### Change the version number (versionNumberNew) when you want the new files to be loaded ###
Hope this should help you to inject external JS file
<script type="text/javascript">
var cachebuster = Math.round(new Date().getTime() / 1000);
document.write('<scr'+'ipt type="text/javascript" src="external.js?cb=' +cachebuster+'"></scr' + 'ipt>');
</script>
Source - Cachebuster code in JavaScript
참고URL : https://stackoverflow.com/questions/9692665/cache-busting-via-params
'IT박스' 카테고리의 다른 글
| PHP에서 cURL을 사용한 RAW POST (0) | 2020.07.27 |
|---|---|
| Android 용 Eclipse에서 ProGuard 활성화 (0) | 2020.07.27 |
| 명령 행 출력 억제 (0) | 2020.07.27 |
| leiningen-지역 항아리에 의존성을 추가하는 방법? (0) | 2020.07.27 |
| Oracle의 CREATE OR REPLACE VIEW에 해당하는 SQL Server (0) | 2020.07.27 |