[javascript] 클라이언트가 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를 추가하면 매우 효과적입니다.