Yui가 새 릴리스로 자바 스크립트 브라우저 캐시를 무효화합니다.

Question

나는 YUI 프로젝트를 만들었습니다. 새로운 YUI 코드를 릴리스하면 브라우저에서 SHIFT + REFRESH를 수행 할 때까지 바로 브라우저에 반영되지 않습니다. 나는이 같은 스크립트를로드 할 수 YUI 모듈 접근 방식을 사용하고있다

는 :

YUI.GlobalConfig = { 
    modules: { 

'manual-entry-util': { 
     fullpath: 'resources/js/common.js', 
     requires: [ 'node']    
    }, 
    'user-perm-util' : { 
     fullpath: 'resources/js/userPermUtil.js', 
     requires: [ 'node', 'io-base', 'json', 'json-stringify']  
    }, 
    'file-upload-custom' : { 
     fullpath: 'resources/js/fileUploadCustom.js', 
     requires: [ 'gallery-datatable-selection','event-custom', 'node']  
    }, 
    'icsd-uploader' : { 
     fullpath: 'resources/js/icsdUploader.js', 
     requires: [ 'uploader', 'node']  
    }, 
    'ui-util' : { 
     fullpath: 'resources/js/uiUtil.js', 
     requires: [ 'node']  
    } 
    } 
}; 

나는 우리가 새로운 코드는 브라우저에 의해 선택 될 수 있도록 변수의 일종을 가지고 URL을 수정해야합니다 생각합니다.

maven 또는 다른 도구를 통해이 프로세스를 자동화하는 방법이 있습니까? 예 : .js 파일의 내용에서 해시 값을 생성 한 다음이를 .js 파일의 URL에 추가 할 수 있습니까?

Answer 1

우리는 @blicksky의 대답의 변종을 사용합니다. 우리는 우리 자신의 콤보 로더를 서블릿으로 만들었습니다.

먼저 YUI를 자체 Maven 프로젝트로 설정합니다. 버전 태그는 YUI의 출시를 반영하므로 버전은 <version>3.17.2</version입니다. 내부 리포가 있으므로 YUI 프로젝트의 모든 업데이트가 게시됩니다. YUI 프로젝트는/src/main/resources/META-INF/resources에 YUI 복사본을 저장합니다. 이 점에서 이것은 WebJars project에 의해 취해진 접근법과 꽤 유사합니다.

콤보 로더는로드 성능을 높이기 위해 YUI 파일을 연결하고 또한 캐시 무효화 URL 매개 변수를 추가합니다. 프로덕션에서 매개 변수는 빌드 ID이지만 개발 중에는 해당 매개 변수가 임의의 숫자가 될 수 있으므로 매번 리소스가로드됩니다. 서버에서 Spring을 사용하기 때문에 Classpath를 사용하여 위에서 언급 한 YUI Maven 프로젝트의 YUI 파일을 확인합니다. 기본 요점은 우리 서블릿이 ResourceLoaderAware을 구현하고 ResourceLoader를 사용하여 서비스를 제공하기 위해 YUI 파일을 선택할 수 있다는 것입니다.

이 접근법은 우리에게 도움이되었으며 또한 파일로드 방식을 개선하고로드 시간을 상당히 세밀하게 제어 할 수있게 해줍니다.

Answer 2

내 접근 방식은 리소스의 경로 시작 부분에 캐시 무효화 값을 포함하는 것입니다. 적절한 값은 현재 단축 된 커밋 해시 또는 개정 번호이거나 CI 도구를 사용하는 경우 현재 빌드 번호입니다. 빌드 프로세스는 모든 자산을이 값으로 이름 붙여진 디렉토리에 배포하므로 현재 커밋 해시가 abcd1234 인 경우 resources/abcd1234/js/과 같은 파일로 끝납니다.

당신의 빌드 프로세스는 아마도 토큰 교체를 사용하여 YUI.GlobalConfig 개체를 동적으로 수정해야 할 것이므로 YUI 로더가 파일을 찾을 수 있습니다. 이 설정은 base 구성 옵션 (http://yuilibrary.com/yui/docs/yui/loader.html#configuration-options 참조)을 설정하여 한 곳에서 수행 할 수 있지만 각 파일에 fullpath을 지정하므로이 각각을 설정해야합니다.

개발하는 동안 (SHIFT + REFRESH로 지금하고있는 것처럼) 계속해서 페이지를 다시로드해야하지만 사용자는 리소스의 각 버전을 개별적으로 캐시합니다.