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

현재 비공개 베타 버전으로 작업 중이므로 사용량이 급격히 증가함에 따라이 프로세스의 속도가 느려질 것으로 예상되지만 여전히 상당히 빠른 변경 작업을 진행하고 있습니다. 우리가 겪고있는 한 가지 문제는 새 JavaScript 파일로 업데이트를 푸시 한 후에도 클라이언트 브라우저가 캐시 된 버전의 파일을 사용하고 업데이트를 볼 수 없다는 것입니다. 분명히 지원 전화 ctrlF5를 통해 서버에서 최신 파일을 얻을 수 있도록 새로 고침을 지시 할 수 있지만 그 전에 처리하는 것이 좋습니다.

우리의 현재 생각은 JavaScript 파일 이름에 버전 번호를 붙이는 것입니다. 그런 다음 변경이있을 때 스크립트에서 버전을 늘리고 모든 참조를 업데이트하십시오. 이것은 분명히 작업을 완료하지만 각 릴리스에서 참조를 업데이트하면 번거로울 수 있습니다.

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

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

예를 들어 :

<script type="text/javascript" src="myfile.js?1500"></script>

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

당신을 위해 버전 관리 시스템이 있습니까? 예를 들어 대부분의 버전 제어 시스템은 체크인시 개정 번호를 자동으로 주입하는 방법을 가지고 있습니다.

다음과 같이 보일 것입니다.

<script type="text/javascript" src="myfile.js?$$REVISION$$"></script>

물론, 언제나처럼 더 나은 솔루션이 있습니다 이것 .

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

예를 들어, 파일을 1 일 이상 캐시하지 않으려면 다음을 보내십시오.

Cache-Control: max-age=86400, must-revalidate

베타의 경우 사용자가 항상 최신 정보를 받도록하려면 다음을 사용하십시오.

Cache-Control: no-cache, must-revalidate

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

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

이 사용법은 다음과 같이 수정되었습니다 : https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

이 답변은 6 년 늦었지만 많은 곳 에서이 답변을 볼 수 없습니다 ... HTML5는 이 문제를 해결하는 데 사용되는 Application Cache 를 도입했습니다 . 필자가 작성중인 새로운 서버 코드가 사람들의 브라우저에 저장된 오래된 자바 스크립트와 충돌하는 것을 발견했기 때문에 자바 스크립트를 만료시키는 방법을 찾고 싶었습니다. 다음과 같은 매니페스트 파일을 사용하십시오.

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

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

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

<script type='text/javascript' src='path/to/file/mylibrary.js?filever=<?=filesize('path/to/file/mylibrary.js')?>'></script>

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

파일을 업데이트 할 때 파일 크기가 같은 결과는 어떻습니까? 그럴 가능성은 얼마나 될까?

모든 브라우저가 '?'로 파일을 캐시하지는 않습니다. 그 안에. 가능한 한 많이 캐시되도록하기 위해 파일 이름에 버전을 포함 시켰습니다.

그래서 대신에 stuff.js?123, 내가 그랬어stuff_123.js

나는 mod_redirect아파치에서 (나는 생각하기 위해) 사용 have stuff_*.js했다.stuff.js

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

전에

<script src="/Scripts/pages/common.js" type="text/javascript"></script>

후에 (강제 재 장전)

<script src="/Scripts/pages/common.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>

DateTime.Now.Ticks를 추가하면 매우 효과적입니다.

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

이러한 방식으로 포함 된 Js 또는 Css 파일 :

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Global.JsPostfix 및 Global.CssPostfix는 Global.asax에서 다음과 같은 방법으로 계산됩니다.

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif      
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}

오늘날의 일반적인 관행은 파일 이름의 일부로 컨텐츠 해시 코드를 생성하여 브라우저 특히 IE가 자바 스크립트 파일 또는 CSS 파일을 다시로드하도록하는 것입니다.

예를 들어

공급 업체. a7561fb0e9a071baadb9 .js
메인. b746e3eb72875af2caa9 .js

일반적으로 webpack과 같은 빌드 도구의 작업입니다. webpack을 사용하고 있는지 누군가가 시험 해보고 싶다면 자세한 내용 이 있습니다 .

JS 파일에 연결되는 페이지를 생성하는 경우 간단한 해결책은 파일의 마지막 수정 시간 소인을 생성 된 링크에 추가하는 것입니다.

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

jQuery 함수 getScript를 사용하여 페이지가로드 될 때마다 js 파일이 실제로로드되도록 할 수 있습니다.

내가 그것을 어떻게입니다 :

$(document).ready(function(){
    $.getScript("../data/playlist.js", function(data, textStatus, jqxhr){
         startProgram();
    });
});

http://api.jquery.com/jQuery.getScript/ 에서 기능을 확인하십시오.

기본적으로 $ .getScript ()는 캐시 설정을 false로 설정합니다. 요청 된 시간마다 브라우저가 스크립트를 다운로드 할 수 있도록 타임 스탬프 된 쿼리 매개 변수를 요청 URL에 추가합니다.

에서 PHP :

function latest_version($file_name){
    echo $file_name."?".filemtime($_SERVER['DOCUMENT_ROOT'] .$file_name);
}

에서 HTML :

<script type="text/javascript" src="<?php latest_version('/a-o/javascript/almanacka.js'); ?>">< /script>

작동 방식 :

HTML에서 filepath당신이 말한 것처럼 및 이름을 작성하십시오 . PHP는 filetime파일을 가져와 filepath+name+"?"+time최신 변경 내용을 반환합니다

우리는 사용자를 위해 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 선택기를 사용하지 않고 스크립트에 첨부 된 고유 토큰이 있는지 확인한 다음 그렇지 않은 경우 최신 토큰 (또는 버전)으로 동적으로로드합니다

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

면책 조항 : 귀하의 경우에 성능이 큰 문제 인 경우 사용하지 마십시오.

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

<script src="~/JsFilePath/JsFile.js?v=@DateTime.UtcNow.ToString()"></script>

location.reload (true);

참조 https://www.w3schools.com/jsref/met_loc_reload.asp를

이 문제를 피하기 위해 브라우저의 캐시가 아닌 웹 서버에서 자바 스크립트를 다시 검색 할 수 있도록이 코드 줄을 동적으로 호출합니다.

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

브라우저가 이러한 리소스를 전혀 캐시하지 않기를 원하지 않을 것입니다. 파일을 캐시 할 가능성이 높지만 파일을 사용할 수있게되면 브라우저에서 새 버전의 파일을 가져 오려고합니다.

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

file.js?V=1이상 을 사용하는 이점fileV1.js 서버에 자바 스크립트 파일의 여러 버전을 저장할 필요가 없다는 것입니다.

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

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

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

?v=AUTO_INCREMENT_VERSIONURL 끝에 추가 하면 브라우저 캐싱을 방지하여 모든 캐시 된 스크립트를 피할 수 있습니다.

동료가 방금 http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/ 에 (css와 관련하여) 게시 한 직후 해당 방법에 대한 참조를 찾았습니다 . 다른 사람들이 사용하고 있으며 작동하는 것 같습니다. 이 시점에서 모든 스크립트 태그에서 이러한 "버전 번호"를 증가시키는 find-replace보다 나은 방법은 없다고 가정합니다.

Django 1.4는 프레임 워크 마다 다르지만 위의 답변 에서 'greenfelt'사이트에 대한 링크와 유사한 방식으로 작동하는 이 기능 을 가지고 있습니다.

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

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>

데이브이 Paquette 좋은 예와 캐시의 설명은 여기 파열 (페이지 하단)가 캐시 무효화를

가장 간단한 해결책? 브라우저를 전혀 캐시하지 마십시오. 현재 시간 (ms)을 쿼리로 추가하십시오.

(여전히 베타 버전이므로 성능을 최적화하지 않은 경우 합리적인 사례를 만들 수 있습니다. 그러나 YMMV는 여기에 있습니다.)

한 가지 간단한 방법. htaccess 수정

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \.(jpe?g|bmp|png|gif|css|js|mp3|ogg)$ [NC]
RewriteCond %{QUERY_STRING} !^(.+?&v33|)v=33[^&]*(?:&(.*)|)$ [NC]
RewriteRule ^ %{REQUEST_URI}?v=33 [R=301,L]

아래는 나를 위해 일했습니다.

<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<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" />
</head>