클라이언트가 JavaScript 파일을 새로 고치도록 하려면 어떻게 해야 합니까?

StackOverflow https://stackoverflow.com/questions/32414

  •  09-06-2019
  •  | 
  •  

문제

우리는 현재 비공개 베타 버전으로 작업 중이므로 여전히 상당히 빠른 변경을 진행하고 있습니다. 물론 사용량이 증가하기 시작하면 이 프로세스가 느려질 것입니다.즉, 우리가 겪고 있는 한 가지 문제는 새로운 JavaScript 파일로 업데이트를 푸시한 후에도 클라이언트 브라우저가 여전히 캐시된 파일 버전을 사용하고 업데이트를 볼 수 없다는 것입니다.분명히, 지원 요청 시 우리는 그들에게 간단히 다음과 같은 조치를 취하라고 알릴 수 있습니다. Ctrl 키F5 서버에서 최신 파일을 가져오도록 새로 고치십시오. 하지만 그 전에 이를 처리하는 것이 바람직합니다.

현재 우리의 생각은 단순히 JavaScript 파일 이름에 버전 번호를 첨부한 다음 변경 사항이 있을 때 스크립트의 버전을 높이고 모든 참조를 업데이트하는 것입니다.이렇게 하면 확실히 작업이 완료되지만 각 릴리스의 참조를 업데이트하는 것은 번거로울 수 있습니다.

우리가 이 문제를 다루는 첫 번째 사람이 아닐 것이라고 확신하기 때문에 나는 이 문제를 커뮤니티에 버릴 것이라고 생각했습니다.코드를 업데이트할 때 클라이언트가 캐시를 업데이트하도록 어떻게 보장하고 있나요?위에 설명된 방법을 사용하는 경우 변경을 단순화하는 프로세스를 사용하고 있습니까?

도움이 되었습니까?

해결책

내가 아는 한 일반적인 해결책은 스크립트의 src 링크에 ?<version>를 추가하는 것입니다.

예 : 라코 디스 <시간> <인용구>

이 시점에서 모든 스크립트 태그에서 이러한 "버전 번호"를 증가시키는 찾기-바꾸기보다 더 좋은 방법이 없다고 가정합니다.

버전 관리 시스템이 당신을 위해 그렇게 할 수 있습니까?예를 들어 대부분의 버전 관리 시스템에는 체크인시 수정 번호를 자동으로 삽입하는 방법이 있습니다.

다음과 같이 표시됩니다. 라코 디스 <시간>

물론 이 와 같은 더 나은 솔루션이 항상 있습니다.a>.

다른 팁

현재 시간을 URL에 추가하는 것은 실제로 일반적인 해결책입니다.그러나 원하는 경우 웹 서버 수준에서이를 관리 할 수도 있습니다.자바 스크립트 파일에 대해 다른 HTTP 헤더를 보내도록 서버를 구성 할 수 있습니다.

예를 들어 파일을 1 일 이하로 강제로 캐시하려면 다음을 전송합니다. 라코 디스

베타의 경우 사용자가 항상 최신 정보를 얻도록하려면 다음을 사용합니다. 라코 디스

Google Page-Speed : 정적 리소스의 URL에 검색어 문자열을 포함하지 마세요. 대부분의 프록시, 특히 버전 3.0까지의 Squid는 "?"로 리소스를 캐시하지 않습니다.응답에 Cache-control : public 헤더가있는 경우에도 URL에 있습니다.이러한 리소스에 대해 프록시 캐싱을 사용하려면 정적 리소스에 대한 참조에서 쿼리 문자열을 제거하고 대신 매개 변수를 파일 이름 자체로 인코딩합니다.

이 경우 URL에 버전을 포함 할 수 있습니다. 예 : http://abc.com/ v1.2 /script.js 및 apache mod_rewrite를 사용하여 링크를 http://abc.com/script.js 로 리디렉션합니다.버전을 변경하면 클라이언트 브라우저가 새 파일을 업데이트합니다.

<인용구>

이 사용량은 무시되었습니다. https://developer.mozilla.org/en-US/docs/ 웹 / HTML / Using_the_application_cache

이 답변은 6 년 늦었지만 여러 곳에서이 답변을 볼 수 없습니다 ... HTML5는 응용 프로그램 캐시 는이 문제를 해결하는 데 사용됩니다. 내가 작성한 새 서버 코드가 사람들의 브라우저에 저장된 오래된 자바 스크립트를 충돌시키는 것을 발견했기 때문에 자바 스크립트를 만료하는 방법을 찾고 싶었습니다. 다음과 같은 매니페스트 파일을 사용하세요. 라코 디스

사용자가 캐시를 업데이트하기를 원할 때마다 새 타임 스탬프로이 파일을 생성합니다. 참고로 이것을 추가하면 매니페스트가 지시 할 때까지 브라우저가 다시로드되지 않습니다 (사용자가 페이지를 새로 고침하더라도).

파일 크기를로드 매개 변수로 추가하는 것은 어떻습니까? 라코 디스

따라서 파일을 업데이트 할 때마다 "filever"매개 변수가 변경됩니다.

파일을 업데이트하고 업데이트 결과 파일 크기가 같은 경우는 어떻습니까?확률은 얼마입니까?

모든 브라우저가 '?'가 포함 된 파일을 캐시하는 것은 아닙니다.가능한 한 많이 캐시되었는지 확인하기 위해 파일 이름에 버전을 포함했습니다.

그래서 stuff.js?123 대신 stuff_123.js를 사용했습니다.

아파치에서 mod_redirect (제 생각에)를 사용하여 have stuff_*.js를 사용하여 stuff.js로 이동했습니다.

ASP.NET 페이지의 경우 다음을 사용하고 있습니다.

이전 라코 디스

AFTER (강제 새로 고침) 라코 디스

DateTime.Now.Ticks 추가는 매우 잘 작동합니다.

ASP.NET의 경우 고급 옵션 (디버그 / 릴리스 모드, 버전)이있는 다음 솔루션을 가정합니다.

다음과 같은 방식으로 포함 된 JS 또는 Css 파일 : 라코 디스

Global.JsPostfix 및 Global.CssPostfix는 Global.asax에서 다음 방식으로 계산됩니다. 라코 디스

JS 파일로 연결되는 페이지를 생성하는 경우 간단한 솔루션은 생성 된 링크에 파일의 마지막 수정 타임 스탬프를 추가하는 것입니다.

이것은 Huppie의 답변과 매우 유사하지만 키워드 대체없이 버전 제어 시스템에서 작동합니다.또한 파일이 전혀 변경되지 않은 경우에도 캐싱을 방지 할 수 있으므로 현재 시간을 추가하는 것보다 낫습니다.

우리는 사용자를 위한 SaaS를 만들고 웹 사이트 페이지에 첨부할 스크립트를 제공하고 있지만 사용자가 기능을 위해 웹 사이트에 스크립트를 첨부해야 하고 강제할 수 없기 때문에 스크립트가 포함된 버전을 첨부할 수 없었습니다. 스크립트를 업데이트할 때마다 버전을 변경하려면

그래서 우리는 사용자가 원본 스크립트를 호출할 때마다 최신 버전의 스크립트를 로드하는 방법을 찾았습니다.

사용자에게 제공된 스크립트 링크

<script src="https://thesaasdomain.com/somejsfile.js" data-ut="user_token"></script>

스크립트 파일

if($('script[src^="https://thesaasdomain.com/somejsfile.js?"]').length !== 0) {
   init();
} else {
   loadScript("https://thesaasdomain.com/somejsfile.js?" + guid());
}

var loadscript = function(scriptURL) {
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = scriptURL;
   head.appendChild(script);
}

var guid = function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

var init = function() {
    // our main code
}

설명:

사용자는 웹 사이트에 제공된 스크립트를 첨부했으며 스크립트에 첨부된 고유 토큰이 존재하는지 또는 jQuery 선택기를 사용하지 않는지 확인한 다음 그렇지 않은 경우 최신 토큰(또는 버전)을 사용하여 동적으로 로드합니다.

이는 동일한 스크립트를 두 번 호출하여 성능 문제가 될 수 있지만 사용자나 클라이언트에게 제공된 실제 스크립트 링크에 ​​버전을 넣지 않고 스크립트가 캐시에서 로드되지 않도록 강제하는 문제를 실제로 해결합니다.

부인 성명:귀하의 경우 성능이 큰 문제인 경우에는 사용하지 마십시오.

한 가지 해결책은 리소스를 가져올 때 URL에 타임 스탬프가있는 쿼리 문자열을 추가하는 것입니다.이는 브라우저가 쿼리 문자열이있는 URL에서 가져온 리소스를 캐시하지 않는다는 사실을 활용합니다.

브라우저가 이러한 리소스를 전혀 캐시하지 않기를 원할 것입니다.캐시를 원할 가능성이 더 높지만 파일이 사용 가능 해지면 브라우저가 새 버전의 파일을 가져 오길 원합니다.

가장 일반적인 해결책은 파일 이름 자체에 타임 스탬프 또는 개정 번호를 포함하는 것 같습니다.올바른 파일을 요청하려면 코드를 수정해야하므로 약간 더 많은 작업이 필요하지만 이는 예를 들어귀하의 snazzy_javascript_file.js (즉, snazzy_javascript_file_7.js)의 버전 7은 버전 8을 출시 할 때까지 브라우저에 캐시 된 다음 대신 snazzy_javascript_file_8.js를 가져 오도록 코드가 변경됩니다.

브라우저 캐싱을 방지하려면 버전 GET 변수를 사용하세요.

URL 끝에 ?v=AUTO_INCREMENT_VERSION를 추가하면 브라우저 캐싱이 방지되어 캐시 된 모든 스크립트를 방지 할 수 있습니다.

제 동료는 제가 http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/ .다른 사람들이 그것을 사용하고 있고 작동하는 것 같아서 반갑습니다.이 시점에서 모든 스크립트 태그에서 이러한 "버전 번호"를 증가시키는 찾기-바꾸기보다 더 좋은 방법이 없다고 가정합니다.

프레임 워크에 따라 다르지만 Django 1.4에는 이 기능 은 위 답변

PHP : 라코 디스

HTML : 라코 디스

기본 원리 :

HTML에서 filepath와 이름을 원하는대로 작성하되 함수에서만 작성하십시오. PHP는 파일의 filetime를 가져 와서 최신 변경 사항의 filepath+name+"?"+time를 반환합니다.

태그 도우미를 통한 ASP.NET Core의 캐시 무효화는이를 처리하고 브라우저가 파일이 변경 될 때까지 캐시 된 스크립트 / css를 유지할 수 있도록합니다.태그 도우미 asp-append-version="true"를 스크립트 (js) 또는 링크 (css) 태그에 추가하기 만하면됩니다. 라코 디스

Dave Paquette는 여기 (페이지 하단)에 캐시 무효화에 대한 좋은 예와 설명이 있습니다. 캐시 무효화

요즘 일반적인 관행은 파일 이름의 일부로 콘텐츠 해시 코드를 생성하여 브라우저, 특히 IE가 javascript 파일 또는 css 파일을 다시로드하도록하는 것입니다.

예 :

공급 업체. a7561fb0e9a071baadb9 .js
main. b746e3eb72875af2caa9 .js

일반적으로 웹팩과 같은 빌드 도구의 작업입니다.웹팩을 사용하는 경우 누구나 사용해보고 싶은 경우 세부 정보 가 더 있습니다..

가장 간단한 솔루션?브라우저가 캐시하지 않도록하십시오.현재 시간 (밀리 초)을 쿼리로 추가합니다.

(아직 베타 버전이므로 성능을 최적화하지 않는 합당한 사례를 만들 수 있습니다.하지만 여기에서는 YMMV입니다.)

file.js?V=1 대신 fileV1.js를 사용할 때의 장점은 서버에 여러 버전의 JavaScript 파일을 저장할 필요가 없다는 것입니다.

file.js?V=1에서 내가 보는 문제는 라이브러리 유틸리티의 새 버전을 사용할 때 깨지는 다른 JavaScript 파일에 종속 코드가있을 수 있다는 것입니다.

이전 버전과의 호환성을 위해 필요한 경우 이전 페이지를 업그레이드 할 준비가 될 때까지 새 페이지에 jQuery.1.3.js를 사용하고 기존 페이지가 jQuery.1.1.js를 사용하도록하는 것이 훨씬 낫다고 생각합니다.

한 가지 간단한 방법입니다. htaccess 수정 라코 디스

asp.net mvc에서 js 파일 버전 번호로 @ DateTime.UtcNow.ToString () 을 사용할 수 있습니다.날짜에 따라 버전 번호가 자동으로 변경되며 클라이언트 브라우저가 자동으로 js 파일을 새로 고치도록합니다.이 방법을 사용하고 있는데 잘 작동합니다. 라코 디스

다음은 저에게 효과적이었습니다. 라코 디스

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top