요구 방지필요한 스크립트 캐싱의 JS

요구 방지필요한 스크립트 캐싱의 JS

RequireJs는 필요한 Javascript 파일을 캐시하는 작업을 내부적으로 수행하는 것 같습니다.필요한 파일 중 하나를 변경한 경우 변경 내용을 적용하려면 파일 이름을 변경해야 합니다.

.<script src="jsfile.js?v2"></script>

이러한 요구의 내부 캐시를 방지하는 방법을 찾고 있습니다.JS에서는 스크립트가 업데이트될 때마다 스크립트 파일의 이름을 변경하지 않고 스크립트가 필요했습니다.

크로스 플랫폼 솔루션:

사용하고 .urlArgs: "bust=" + (new Date()).getTime()중 자동 및 "캐시 스위칭"에 설명합니다.urlArgs: "bust=v2"필요한 스크립트를 갱신한 후 하드 코드화된 버전 번호를 늘립니다.

주의:

@Dustin Getz는 Javascript를 통해 Chrome Developer Tools를 제공합니다. 중 하나는 이렇게 쓰는 예요.debugger;자바스크립트

서버 고유의 솔루션:

노드나 Apache 등 서버 환경에 적합한 특정 솔루션에 대해서는 다음 답변을 참조하십시오.

RequireJ는 캐시 버스트용으로 각 스크립트 URL에 값을 추가하도록 설정할 수 있습니다.

요건에서JS 매뉴얼(http://requirejs.org/docs/api.html#config):

urlArgs: 필요한 URL에 추가된 추가 쿼리 문자열 인수JS는 리소스를 가져오는 데 사용합니다.브라우저 또는 서버가 올바르게 설정되어 있지 않은 경우 캐시 버스트에 가장 유용합니다.

예: 모든 스크립트에 "v2" 추가:

require.config({
    urlArgs: "bust=v2"
});

개발 목적을 위해 Require를 강제 적용할 수 있습니다.타임스탬프를 추가하여 캐시를 바이패스하는 JS:

require.config({
    urlArgs: "bust=" + (new Date()).getTime()
});

이 경우 urlArgs를 사용하지 마십시오.

respect header는 동적으로 된 http로 됩니다.)<script> 이 는 모든

javascript 자산에 적절한 HTTP 헤더를 제공하여 개발 중에 캐싱을 비활성화하십시오.

require는 새로고침.require's urlArgs를 사용해야 .결국 이 기능을 사용해야 합니다.debugger 나쁘다.는 ㅇㅇㅇㅇㅇㅇㅇ를 씁니다.urlArgsGit Sha를 사용하여 프로덕션 업그레이드 중에 자산을 캐시 버스트할 수 있습니다. 그러면 자산이 영구적으로 캐시되도록 설정하고 오래된 자산을 보유하지 않도록 보장할 수 있습니다.

개발에서는 복잡한 mockjax 구성으로 모든 ajax 요청을 모의하고, 모든 캐시가 꺼진 상태에서 10줄의 python http 서버를 사용하여 javascript 전용 모드로 앱을 서비스할 수 있습니다.이를 통해 수백 개의 안정적 웹 서비스 엔드포인트를 갖춘 대규모 "엔터프라이즈" 애플리케이션으로 확장할 수 있었습니다.백엔드 코드에 대한 액세스 권한을 부여하지 않고 실제 프로덕션 코드 베이스로 작업할 수 있는 계약 디자이너도 있습니다.

urlArgs 솔루션에 문제가 있습니다.유감스럽게도 사용자와 사용자의 웹 브라우저 사이에 있을 수 있는 모든 프록시 서버를 제어할 수는 없습니다.이러한 프록시 서버 중 일부는 파일을 캐시할 때 URL 매개 변수를 무시하도록 구성할 수 있습니다.이 경우 잘못된 버전의 JS 파일이 사용자에게 전달됩니다.

결국 포기하고 직접 require.js에 수정을 실장했습니다.requirejs 라이브러리의 버전을 변경할 의향이 있는 경우 이 솔루션이 도움이 될 수 있습니다.

이 패치는, 다음과 같이 표시됩니다.

https://github.com/jbcpollak/requirejs/commit/589ee0cdfe6f719cd761eee631ce68eee09a5a67

추가 후 require config에서 다음과 같은 작업을 수행할 수 있습니다.

var require = {
    baseUrl: "/scripts/",
    cacheSuffix: ".buildNumber"
}

서버 하여 을(를) 치환합니다.buildNumber리비전 ID/소프트웨어 버전/즐겨찾는 색상으로 표시됩니다.

사용 요건은 다음과 같습니다.

require(["myModule"], function() {
    // no-op;
});

다음 파일을 요청해야 합니다.

http://yourserver.com/scripts/myModule.buildNumber.js

서버 환경에서는 url rewrite 규칙을 사용하여 buildNumber를 삭제하고 올바른 JS 파일을 제공합니다.이렇게 하면 실제로 모든 JS 파일의 이름을 변경할 필요가 없습니다.

이 패치는 프로토콜을 지정하는 스크립트를 무시하고 JS 이외의 파일에는 영향을 주지 않습니다.

이 방법은 환경에 적합하지만 일부 사용자는 서픽스보다 프레픽스를 선호할 수 있습니다.고객의 요구에 맞게 커밋을 쉽게 변경할 수 있습니다.

업데이트:

풀 요구의 설명에서 requirejs 작성자는 리비전 번호의 프리픽스를 붙이는 솔루션으로서 이것이 기능하는 것을 제안합니다.

var require = {
    baseUrl: "/scripts/buildNumber."
};

아직 시도하지 않았습니다만, 이것은 다음의 URL을 요구하는 것을 의미합니다.

http://yourserver.com/scripts/buildNumber.myModule.js

이것은 접두사를 사용할 수 있는 많은 사람들에게 매우 효과적일 수 있습니다.

다음은 중복될 수 있는 몇 가지 질문입니다.

RequireJs 및 프록시 캐시

require.js - URL의 일부로 필요한 모듈의 버전을 설정하려면 어떻게 해야 합니까?

Expire cache on require.js data-main에서 영감을 얻어 다음 개미 태스크로 도입 스크립트를 업데이트했습니다.

<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의 주요 작성자는 다음을 사용하지 않는 것을 선호합니다.

자산의 경우 디렉토리로 , 그에 「」를 .baseUrl된 디렉토리를 "config"로 하기 위해 baseUrl다른 파일은 변경되지 않으며 쿼리 문자열이 있는 URL을 캐시하지 못할 수 있는 프록시 문제를 방지할 수 있습니다.

[내 스타일링]

나는 이 충고를 따른다.

개발 중

자주될 수 하는 것이 즉, 「」를 입니다.Last-Modified합니다.If-Modified-Since304(적절한 경우)로 설정합니다.스태틱 파일을 처리하는 노드 익스프레스 세트를 기반으로 하는 서버에서도 즉시 실행할 수 있습니다.브라우저에 아무것도 할 필요가 없고 중단점을 흐트러뜨리지도 않습니다.

이 스니펫을 AskApache에서 가져와 로컬 Apache 웹 서버의 개별 .conf 파일에 넣습니다(내 경우 /etc/apache2/others/presventcaching.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 Dev Tools에서 캐시를 비활성화할 수 있습니다(웹 사이트 개발을 위해 Chrome 캐시 비활성화).캐시 디세이블화는 dev tools 대화상자가 열려 있는 경우에만 이루어지므로 정기적인 브라우징을 수행할 때마다 이 옵션을 전환할 필요가 없습니다.

주의: 사용자가 최신 코드를 얻을 수 있도록 'urlArgs'를 사용하는 것이 프로덕션에서 적절한 솔루션입니다.그러나 Chrome은 매번 새로 고칠 때마다 중단점을 무효화하므로 디버깅이 어렵습니다(매번 '새로운' 파일이 제공되기 때문입니다).

Require가 있는 캐시 버스트에는 'urlArgs'를 사용하지 않는 것이 좋습니다.JS. 이렇게 한다고 문제가 완전히 해결되는 것은 아니기 때문입니다.버전 no를 업데이트하면 단일 리소스만 변경해도 모든 리소스가 다운로드됩니다.

이 문제를 해결하려면 리비전 번호를 작성하기 위해 'filerev'와 같은 Grunt 모듈을 사용할 것을 권장합니다.게다가 저는 Gruntfile에 리비전을 갱신하는 커스텀 태스크를 작성했습니다.

필요에 따라서, 이 작업의 코드 스니펫을 공유할 수 있습니다.

Django / Flask (다른 언어 / VCS 시스템에 쉽게 적응할 수 있음)는 다음과 같습니다.

고객님의 고객명config.py해야 할 수 ('python3'에서는 python2에서는 python2로 인코딩을 조정해야 .)

import subprocess
GIT_HASH = subprocess.check_output(['git', 'rev-parse', 'HEAD']).strip().decode('utf-8')

그런 다음 템플릿에서 다음을 수행합니다.

{% if config.DEBUG %}
     require.config({urlArgs: "bust=" + (new Date().getTime())});
{% else %}
    require.config({urlArgs: "bust=" + {{ config.GIT_HASH|tojson }}});
{% endif %}

• 수동 빌드 프로세스가 필요 없음
• " "만 "git rev-parse HEAD앱에 합니다.config 표시

동적 솔루션(urlArgs 없음)

이 문제에 대한 간단한 해결책이 있습니다.그러면 모듈별로 원하는 리비전 번호를 로드할 수 있습니다.

원래 requirejs.load 함수를 저장하고 자체 함수로 덮어쓰고 수정된 URL을 원래 requirejs.load로 다시 해석할 수 있습니다.

var load = requirejs.load;
requirejs.load = function (context, moduleId, url) {
    url += "?v=" + oRevision[moduleId];
    load(context, moduleId, url);
};

빌드 프로세스에서 저는 "gulp-rev"를 사용하여 모든 모듈의 리비전이 사용된 매니페스트 파일을 만들었습니다.Gulp 태스크의 간단한 버전:

gulp.task('gulp-revision', function() {
    var sManifestFileName = 'revision.js';

    return gulp.src(aGulpPaths)
        .pipe(rev())
        .pipe(rev.manifest(sManifestFileName, {
        transformer: {
            stringify: function(a) {
                var oAssetHashes = {};

                for(var k in a) {
                    var key = (k.substr(0, k.length - 3));

                    var sHash = a[k].substr(a[k].indexOf(".") - 10, 10);
                    oAssetHashes[key] = sHash;
                }

                return "define([], function() { return " + JSON.stringify(oAssetHashes) + "; });"
            }
        }
    }))
    .pipe(gulp.dest('./'));
});

moduleNames 리비전 번호를 가진 AMD 모듈이 생성됩니다.이 모듈 번호는 main.js에 'oRevision'으로 포함되어 있습니다.여기서 requirejs.load 함수를 덮어씁니다.

이는 @phil mccull이 수용한 답변에 추가됩니다.

저는 그의 방법을 사용하지만 사전 빌드 실행 T4 템플릿을 생성하여 프로세스를 자동화합니다.

빌드 전 명령어:

set textTemplatingPath="%CommonProgramFiles(x86)%\Microsoft Shared\TextTemplating\$(VisualStudioVersion)\texttransform.exe"
if %textTemplatingPath%=="\Microsoft Shared\TextTemplating\$(VisualStudioVersion)\texttransform.exe" set textTemplatingPath="%CommonProgramFiles%\Microsoft Shared\TextTemplating\$(VisualStudioVersion)\texttransform.exe"
%textTemplatingPath% "$(ProjectDir)CacheBuster.tt"

T4 템플릿:

생성된 파일:

require.config.js가 로드되기 전에 변수에 저장합니다.

require.config.js 참조:

제 경우 클릭할 때마다 동일한 양식을 로드하고 싶었지만 파일에서 변경한 내용이 그대로 남아 있지 않았으면 합니다.이 투고와 정확히 관련이 없을 수도 있지만, 이것은 클라이언트 측에서 require에 대한 구성을 설정하지 않으면 잠재적인 솔루션이 될 수 있습니다.내용을 직접 보내는 대신 필요한 파일을 복사하여 실제 파일을 그대로 유지할 수 있습니다.

LoadFile(filePath){
    const file = require(filePath);
    const result = angular.copy(file);
    return result;
}

언급URL : https://stackoverflow.com/questions/8315088/prevent-requirejs-from-caching-required-scripts