공격적인 JavaScript 캐싱에 대한 도움말

https://stackoverflow.com/questions/54475

09-06-2019
|

문제

HTML 파일에서 참조되는 몇 가지 JavaScript 파일을 변경했지만 브라우저에 변경 사항이 표시되지 않는 문제가 발생했습니다.웹 서버에 최신 버전이 있더라도 브라우저에 캐시된 복사본을 유지합니다.

브라우저가 캐시를 강제로 지울 때까지는 변경 사항이 표시되지 않습니다.

이것이 웹 서버 구성입니까?캐시하지 않도록 JavaScript 파일을 설정해야 합니까?나는 몇 가지 흥미로운 기술을 보았습니다. Google 웹 툴킷 그들이 실제로 생성하는 곳은 새로운 업데이트가 이루어질 때마다 JavaScript 파일 이름입니다.나는 이것이 프록시와 브라우저가 동일한 이름을 가진 이전 버전의 JavaScript 파일을 유지하는 것을 방지하기 위한 것이라고 생각합니다.

어딘가에 모범 사례 목록이 있습니까?

해결책

다음과 같이 모든 Javascript(및 CSS 등) 끝에 제품 빌드 번호를 추가합니다.

<script src="MyScript.js?4.0.8243">

브라우저는 물음표 뒤의 모든 내용을 무시하지만 업그레이드로 인해 캐시 다시 로드를 의미하는 새 URL이 생성됩니다.

이는 "캐시하지 않음"을 의미하는 HTTP 헤더를 설정할 수 있다는 추가적인 이점이 있습니다.

다른 팁

웹 서버에 최신 버전이 있더라도 브라우저에 캐시된 복사본을 유지합니다.

이는 아마도 HTTP Expires/Cache-Control 헤더가 설정되었기 때문일 것입니다.

http://developer.yahoo.com/performance/rules.html#expires

나는 이것에 대해 여기에 썼습니다 :

http://www.codinghorror.com/blog/archives/000932.html

이것은 그 자체로 나쁜 조언은 아니지만, 잘못하면 큰 문제를 일으킬 수 있습니다.예를 들어 Microsoft의 IIS에서는 Expires 헤더가 기본적으로 항상 꺼져 있는데, 아마도 바로 그런 이유 때문일 것입니다.HTTP 리소스에 Expires 헤더를 설정하면 클라이언트에게 다음을 지시하게 됩니다. 해당 리소스의 새 버전을 확인하지 마십시오 -- 적어도 Expires 헤더의 만료 날짜까지는 그렇지 않습니다. 내가 결코 하지 않는다고 말하는 것은 진심입니다. 브라우저는 심지어 묻다 새 버전의 경우;클라이언트가 캐시를 지우거나 캐시가 만료 날짜에 도달할 때까지 캐시된 버전을 사용하는 것이 좋다고 가정합니다. Yahoo는 이러한 리소스를 새로 고칠 필요가 있을 때 이러한 리소스의 파일 이름을 변경한다고 언급합니다.

여기서 실제로 절약할 수 있는 것은 클라이언트가 새 버전을 위해 서버에 핑을 보내고 리소스가 변경되지 않은 일반적인 경우에 수정되지 않은 304 헤더를 다시 가져오는 비용뿐입니다.그닥 오버헤드는 아닌데..당신이 야후가 아니라면 말이죠.물론, 거의 변경되지 않는 이미지나 스크립트 세트가 있다면 반드시 클라이언트 캐싱을 활용하고 Cache-Control 헤더를 켜세요.캐싱은 브라우저 성능에 매우 중요합니다.모든 웹 개발자는 HTTP 캐싱이 어떻게 작동하는지 깊이 이해하고 있어야 합니다.그러나 이점을 얻을 수 있는 특정 폴더나 파일에 대해 수술적이고 제한된 방식으로만 사용하십시오.다른 어떤 경우에는 위험이 이점보다 더 큽니다.전체 웹사이트에 대한 기본 설정으로 설정하고 싶은 것은 확실히 아닙니다.콘텐츠가 변경될 때마다 파일 이름을 변경하는 것을 좋아하지 않는 한.

@제이슨과 대런

~~IE6~~ 쿼리 문자열이 있는 모든 항목을 캐시할 수 없는 것으로 처리합니다.가짜 디렉토리와 같이 버전 번호를 URL로 가져오는 다른 방법을 찾아야 합니다.

<script src="/js/version/MyScript.js"/>

요청을 이행하기 전에 서버 측에서 js 다음의 첫 번째 디렉터리 수준을 제거하면 됩니다.

편집하다:모두 죄송합니다.쿼리 문자열로 캐시하지 않는 것은 IE6이 아니라 Squid입니다.더 많은 정보 여기.

저는 이 문제를 어떻게 극복했는지에 대한 블로그 게시물을 작성했습니다.

ASP.NET에서 JavaScript 및 CSS 스타일시트 캐싱 문제 방지

기본적으로 개발 중에 CSS 파일의 파일 이름 뒤에 쿼리 문자열에 임의의 숫자를 추가할 수 있습니다.릴리스 빌드를 수행하면 코드가 대신 어셈블리의 개정 번호를 사용하도록 전환됩니다.이는 프로덕션 환경에서 클라이언트가 스타일시트를 캐시할 수 있지만 사이트의 새 버전을 출시할 때마다 파일을 다시 로드해야 함을 의미합니다.

나는 또한 사물의 이름을 바꾸는 방법을 사용합니다.결코 실패하지 않으며 수행하기가 매우 쉽습니다.

웹 서버가 브라우저에 새 버전이 있음을 알리기 위해 올바른 헤더를 보내고 있습니까?또한 이전에 쿼리 문자열에 날짜를 추가했습니다.즉, myscripts.js?date=4/14/2008 12:45:03 (날짜만 인코딩됩니다)

@Darren 기본적으로 IIS 6 및 Apache 2 모두에서 캐싱 문제가 발생했습니다.HTTP 응답 헤더를 수정하는 것이 적절한 해결 방법인지는 잘 모르겠지만 대신 여기에 있는 몇 가지 응답에 설명된 이름 바꾸기 경로를 사용하는 것이 좋습니다.

@Chris 좋은 팁입니다.쿼리 문자열 접근 방식은 좋은 접근 방식이라고 생각했지만 모든 경우를 포괄하려면 고유한 파일이나 디렉터리 이름이 필요한 것 같습니다.

모든 릴리스에서 우리는 모든 정적 자산의 루트 경로에 단조 증가하는 정수를 추가하기만 하면 클라이언트가 다시 로드됩니다(이전에 IE6에서 쿼리 문자열 메서드 break를 본 적이 있습니다).예를 들어:

릴리스 1:http://www.foo.com/1/js/foo.js
릴리스 2:http://www.foo.com/2/js/foo.js

각 릴리스마다 링크를 다시 조정해야 하지만 배포 도구에 대한 링크를 자동으로 변경하는 기능을 구축했습니다.

이 작업을 수행하면 클라이언트가 JS 리소스를 "영원히" 캐시할 수 있도록 하는 Expires/Cache-Control 헤더를 사용할 수 있습니다. 각 릴리스마다 경로가 변경되기 때문입니다. 제 생각에는 @JasonCohen이 얻은 것입니다.

매우 유용한 몇 가지 기술 여기 Powershell을 사용하여 배포를 자동화할 계획이 없더라도 마찬가지입니다.

그만한 가치가 있다는 것을 나는 보았습니다. 일탈예술 JS 파일을 54504.js로 제공하는 상당히 큰 사이트입니다.방금 확인해보니 이제 v6core.css?-5855446573 v6core_jc.js?4150339741 등으로 제공됩니다.

쿼리 문자열의 문제가 서버에서 발생하는 경우 이를 어느 정도 제어할 수 있다고 가정합니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow