링크 및 스크립트 태그에서 CSS 및 Javascript URL에“? v = 1”을 추가하면 어떤 기능이 있습니까?

HTML 5 상용구 템플릿 ( http://html5boilerplate.com/ )을보고 "?v=1"CSS 및 Javascript 파일을 참조 할 때 URL 에서 사용되는 것을 확인했습니다 .

1. "?v=1"링크 및 스크립트 태그에서 CSS 및 Javascript URL에 추가 하면 어떤 기능이 있습니까?
2. 모든 Javascript URL에 "?v=1"(아래 샘플의 예) 가있는 것은 아닙니다 js/modernizr-1.5.min.js. 이것이 사실 인 이유가 있습니까?

그들의 샘플 index.html:

<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">

<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">

<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>

<!------ Some lines removed ------>

<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>

<!--[if lt IE 7 ]>
  <script src="js/dd_belatedpng.js?v=1"></script>
<![endif]-->


<!-- yui profiler and profileviewer - remove for production -->
<script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
<script src="js/profiling/config.js?v=1"></script>
<!-- end profiling code -->

이들은 일반적으로 사이트가 새 버전으로 업데이트 될 때 브라우저가 새 버전을 갖도록하기위한 것입니다. 예를 들어 빌드 프로세스의 일부로 다음과 같은 것이 있습니다.

/Resources/Combined.css?v=x.x.x.buildnumber

이것은 새로운 코드 푸시마다 변경되므로 클라이언트는 쿼리 문자열 때문에 새 버전을 가져와야합니다. 예를 들어이 페이지 (이 답변 당시)를보십시오.

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

SO 팀은 개정 번호 대신 파일 해시를 사용했다고 생각합니다.이 방법은 새로운 릴리스에서도 더 나은 접근 방식입니다. 브라우저는 파일이 실제로 변경 될 때만 새 버전을 가져야합니다 .

이 두 가지 접근 방식을 통해 캐시 헤더를 엄청나게 길게 설정할 수 있습니다 (20 년). 그러나 변경 될 때 캐시 헤더에 대해 걱정할 필요가 없습니다. 브라우저는 다른 쿼리 문자열을보고 그것을 다른 새 파일.

이렇게하면 서버에서 css 또는 js 파일의 최신 버전을 가져옵니다.

나중에 "?v=2"최신 버전 등이 있으면 추가 할 수 있습니다 "?v=3", "?v=4".

당신이 하나를 사용할 수 있다는 것을 참고 querystring, 'V'는 예를 들어 필수되지 않습니다 :

"?blah=1"도 잘 작동합니다.

과

"?xyz=1002" 작동합니다.

브라우저는 이제 js 및 css 파일을 더 좋고 더 오래 캐싱하기 때문에 이것은 일반적인 기술입니다.

해시 솔루션은 로컬 웹 폴더에 어떤 버전의 파일이 있는지 알고 싶을 때 읽기 쉽지만 실제로 읽을 수는 없습니다. 해결책은date/time 버전 스탬프 처리하여 서버 파일과 쉽게 비교할 수 있도록하는 것입니다.

예를 들어 .js or .css파일이 날짜가 지정된 경우2011-02-08 15:55:30 지난 (마지막 수정) 버전은.js?v=20110208155530

모든 언어로 된 파일의 속성을 쉽게 읽을 수 있어야합니다. ASP.Net에서는 정말 쉽습니다 ...

".js?v=" + File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + filename).ToString("yyMMddHHHmmss");

coz 중 먼저 속성 / 함수로 멋지게 리팩토링하십시오. 더 이상 변명의 여지가 없습니다.

행운을 빈다.

자바 스크립트 파일은 종종 예상보다 훨씬 오랫동안 브라우저에 의해 캐시됩니다.

JS 파일의 새 버전을 릴리스 할 때 종종 예기치 않은 동작이 발생할 수 있습니다.

따라서 javascript 파일의 URL에 QueryString 매개 변수를 추가하는 것이 일반적입니다. 이렇게하면 브라우저가 Javascript 파일을 v = 1로 캐시합니다. 자바 스크립트 파일의 새 버전을 출시하면 URL을 v = 2로 변경하면 브라우저에서 새 사본을 다운로드해야합니다.

당신에게 질문에 대답하기 위해;

"? v = 1" 브라우저의 캐시에서 사용하는 대신 css 및 js 파일의 새로운 사본을 다운로드하기 때문에 작성됩니다.

스타일 시트 또는 js 파일의 끝에이 쿼리 문자열 매개 변수를 언급하면 ​​브라우저에서 .css 및 .js 파일의 최근 변경 사항이 효과적으로 이루어지기 때문에 브라우저가 새 파일을 강제로 다운로드합니다.

이 버전 관리를 사용하지 않으면 해당 파일의 최근 변경 사항을 보려면 페이지 새로 고침 캐시를 지워야 할 수 있습니다.

CSS와 JS 파일의 버전을 만드는 방법과 이유를 설명하는 기사가 있습니다.

새 릴리스의 개발 / 테스트 중에는 브라우저, 서버 및 때로는 3G 통신 회사 (모바일 배포를 수행하는 경우)가 정적 콘텐츠 (예 : JS, CSS, HTML, img)를 캐시하기 때문에 캐시가 문제가 될 수 있습니다. URL에 버전 번호, 난수 또는 타임 스탬프를 추가하여이를 극복 할 수 있습니다. 예 : JSP :<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

서버 페이지 JSP, ASP, PHP 대신 순수한 HTML을 실행하는 경우 서버가 도움이되지 않습니다. 브라우저에서 JS가 실행되기 전에 링크가로드되므로 링크를 제거하고 JS로로드해야합니다.

// front end cache bust
var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];   
for (i=0; i < cacheBust.length; i++){
     var el = document.createElement('script');
     el.src = cacheBust[i]+"?v=" + Math.random();
     document.getElementsByTagName('head')[0].appendChild(el);
}

앞에서 읽을 수 있듯이 ?v=1 브라우저는 파일 버전 1을 얻습니다. 새 버전이 있으면 다른 버전 번호 만 추가하면 브라우저에서 이전 버전을 잊어 버리고 새 버전을로드합니다.

빌드 단계에서 파일 버전을 관리 하는 gulp 플러그인이 있으므로 수동으로 할 필요가 없습니다. 편리하고 빌드 프로세스에 쉽게 통합 할 수 있습니다. 링크는 다음과 같습니다. gulp-annotate

다른 사람들이 언급했듯이 이것은 프론트 엔드 캐시 버스 팅에 사용됩니다. 이것을 구현하기 위해 개인적으로 grunt-cache-bust npm 패키지가 유용하다는 것을 알았습니다.