[javascript] RequireJS가 필수 스크립트를 캐시하지 못하도록 방지
RequireJS는 필요한 자바 스크립트 파일을 캐시하는 내부 작업을 수행하는 것 같습니다. 필요한 파일 중 하나를 변경하면 변경 사항이 적용되도록 파일 이름을 바꿔야합니다.
파일 이름 끝에 querystring 매개 변수로 버전 번호를 추가하는 일반적인 트릭은 requirejs에서 작동하지 않습니다. <script src="jsfile.js?v2"></script>
내가 찾고있는 것은 업데이트 할 때마다 스크립트 파일의 이름을 바꾸지 않고도 RequireJS 필수 스크립트의 내부 캐시를 방지하는 방법입니다.
플랫폼 간 솔루션 :
내가 지금 사용하고 있습니다 urlArgs: "bust=" + (new Date()).getTime()
에 대한 자동 캐시 무효화 개발 과정과 urlArgs: "bust=v2"
내가 업데이트에 필요한 스크립트를 출시 한 후 하드 코딩 된 버전 납입을 증가 생산.
노트 :
@Dustin Getz는 최근 답변에서 Javascript 파일을 이와 같이 지속적으로 새로 고칠 때 Chrome 개발자 도구가 디버깅 중에 중단 점을 제거한다고 언급했습니다. 한 가지 해결 방법은 debugger;
대부분의 Javascript 디버거에서 중단 점을 트리거하기 위해 코드 를 작성 하는 것입니다.
서버 별 솔루션 :
노드 또는 Apache와 같은 서버 환경에 더 적합한 특정 솔루션에 대해서는 아래 답변 중 일부를 참조하십시오.
답변
캐시 버스 팅을 위해 각 스크립트 URL에 값을 추가하도록 RequireJS를 구성 할 수 있습니다.
RequireJS 문서 ( http://requirejs.org/docs/api.html#config )에서 :
urlArgs : RequireJS가 자원을 페치하기 위해 사용하는 URL에 추가 된 추가 쿼리 문자열 인수. 브라우저 나 서버가 올바르게 구성되지 않은 경우 버스트 캐시에 가장 유용합니다.
모든 스크립트에 “v2″를 추가하는 예 :
require.config({
urlArgs: "bust=v2"
});
개발 목적으로 타임 스탬프를 추가하여 RequireJS가 캐시를 무시하도록 할 수 있습니다.
require.config({
urlArgs: "bust=" + (new Date()).getTime()
});
답변
urlArgs를 사용하지 마십시오!
스크립트로드에는 http 캐싱 헤더가 필요합니다. 스크립트는 동적으로 삽입 된 상태로로드됩니다. <script>
즉, 요청이로드 된 기존 애셋처럼 보입니다.
개발 중에 캐싱을 비활성화하려면 적절한 HTTP 헤더를 사용하여 Javascript 자산을 제공하십시오.
require의 urlArgs를 사용하면 설정 한 중단 점이 새로 고침 동안 유지되지 않습니다. 결국 debugger
코드 어디에나 명령문 을 넣어야 합니다. 나쁜. urlArgs
git sha를 사용하여 프로덕션 업그레이드 중에 캐시 버스 팅 자산에 사용 합니다. 그런 다음 자산을 영구적으로 캐시하도록 설정하고 오래된 자산을 보유하지 않도록 보장 할 수 있습니다.
개발 과정에서 복잡한 mockjax 구성으로 모든 ajax 요청을 조롱 한 다음 모든 캐싱이 해제 된 10 줄 파이썬 http 서버로 자바 스크립트 전용 모드로 앱을 제공 할 수 있습니다 . 이것은 수백 개의 편안한 웹 서비스 엔드 포인트가있는 상당히 큰 “엔터프라이즈”응용 프로그램으로 확장되었습니다. 백엔드 코드에 액세스하지 않고도 실제 프로덕션 코드베이스로 작업 할 수있는 계약 된 디자이너도 있습니다.
답변
urlArgs 솔루션에 문제가 있습니다. 불행히도 귀하와 사용자의 웹 브라우저 사이에있을 수있는 모든 프록시 서버를 제어 할 수는 없습니다. 이러한 프록시 서버 중 일부는 파일 캐싱시 URL 매개 변수를 무시하도록 구성 할 수 있습니다. 이 경우 잘못된 버전의 JS 파일이 사용자에게 전달됩니다.
나는 마침내 내 자신의 수정 사항 을 require.js에 직접 포기하고 구현했습니다 . requirejs 라이브러리의 버전을 기꺼이 수정하려는 경우이 솔루션이 적합 할 수 있습니다.
여기서 패치를 볼 수 있습니다.
https://github.com/jbcpollak/requirejs/commit/589ee0cdfe6f719cd761eee631ce68eee09a5a67
추가 한 후에는 require 설정에서 다음과 같은 작업을 수행 할 수 있습니다.
var require = {
baseUrl: "/scripts/",
cacheSuffix: ".buildNumber"
}
빌드 시스템 또는 서버 환경을 buildNumber
사용하여 개정 ID / 소프트웨어 버전 / 좋아하는 색상 으로 바꾸십시오 .
다음과 같이 요구합니다.
require(["myModule"], function() {
// no-op;
});
이 파일을 요청해야합니다.
http://yourserver.com/scripts/myModule.buildNumber.js
서버 환경에서 URL 재 작성 규칙을 사용하여 buildNumber를 제거하고 올바른 JS 파일을 제공합니다. 이렇게하면 실제로 모든 JS 파일의 이름을 바꾸는 것에 대해 걱정할 필요가 없습니다.
패치는 프로토콜을 지정하는 모든 스크립트를 무시하고 비 JS 파일에는 영향을 미치지 않습니다.
이것은 내 환경에서는 잘 작동하지만 일부 사용자는 접미사가 아닌 접두사를 선호한다는 것을 알고 있습니다. 필요에 맞게 커밋을 쉽게 수정할 수 있습니다.
최신 정보:
풀 요청 토론에서 requirejs 작성자는 개정 번호 앞에 접두사로 사용할 수 있다고 제안합니다.
var require = {
baseUrl: "/scripts/buildNumber."
};
나는 이것을 시도하지 않았지만 이것은 다음 URL을 요청할 것이라는 의미입니다.
http://yourserver.com/scripts/buildNumber.myModule.js
접두사를 사용할 수있는 많은 사람들에게 매우 효과적 일 수 있습니다.
가능한 중복 질문은 다음과 같습니다.
답변
require.js data-main의 Expire 캐시에서 영감을 받아 다음과 같은 개미 작업으로 배포 스크립트를 업데이트했습니다.
<target name="deployWebsite">
<untar src="${temp.dir}/website.tar.gz" dest="${website.dir}" compression="gzip" />
<!-- fetch latest buildNumber from build agent -->
<replace file="${website.dir}/js/main.js" token="@Revision@" value="${buildNumber}" />
</target>
main.js의 시작 부분은 다음과 같습니다.
require.config({
baseUrl: '/js',
urlArgs: 'bust=@Revision@',
...
});
답변
생산 중
urlArgs
문제를 일으킬 수 있습니다!
requirejs의 주요 저자는 다음 을 사용하지 않는 것을 선호합니다urlArgs
.
배포 된 자산의 경우 전체 빌드의 버전 또는 해시를 빌드 디렉토리
baseUrl
로 배치하고 프로젝트에서 해당 버전 디렉토리를로 사용 하도록 구성을 수정하는 것을 선호 합니다baseUrl
. 그러면 다른 파일이 변경 되지 않으며 쿼리 문자열이있는 URL을 캐시하지 않을 수있는 프록시 문제를 피할 수 있습니다.
[스타일링 광산.]
나는이 조언을 따릅니다.
개발 중
자주 변경 될 수있는 파일을 지능적으로 캐시하는 서버를 사용하는 것이 좋습니다. 적절한 경우 304로 내보내고 Last-Modified
응답 하는 서버입니다 If-Modified-Since
. 정적 파일을 제공하기 위해 Node의 Express 세트를 기반으로 한 서버조차도 즉시 사용할 수 있습니다. 브라우저에 아무것도 할 필요가 없으며 중단 점을 망칠 필요가 없습니다.
답변
AskApache 에서이 스 니펫을 가져 와서 로컬 Apache 웹 서버 (내 경우에는 /etc/apache2/others/preventcaching.conf)의 별도 .conf 파일에 넣었습니다.
<FilesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</FilesMatch>
개발을 위해 코드를 변경할 필요없이 정상적으로 작동합니다. 프로덕션에서는 @dvtoever의 접근 방식을 사용할 수 있습니다.
답변
개발을위한 빠른 수정
개발을 위해 Chrome 개발자 도구에서 캐시를 사용 중지 할 수 있습니다 ( 웹 사이트 개발을 위해 Chrome 캐시 사용 안함 ). 캐시 비활성화는 개발 도구 대화 상자가 열려있는 경우에만 발생하므로 정기적으로 탐색 할 때마다이 옵션을 전환 할 염려가 없습니다.
참고 : ‘ urlArgs ‘를 사용하면 프로덕션 환경에서 사용자가 최신 코드를 얻을 수있는 올바른 솔루션입니다. 그러나 크롬은 매번 새로 고침 할 때마다 새로 고침 할 때마다 중단 점이 무효화되므로 디버깅이 어려워집니다.