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

링크 및 스크립트 태그에서 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 매개 변수를 추가하는 것이 일반적입니다. 이렇게하면 브라우저는 v = 1로 Javascript 파일을 캐시합니다. 자바 스크립트 파일의 새 버전을 출시하면 URL을 v = 2로 변경하면 브라우저에서 새 사본을 다운로드해야합니다.

---

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

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

If you mention this query string parameter at the end of your stylesheet or the js file then it forces the browser to download a new file, Due to which the recent changes in the .css and .js files are made effetive in your browser.

If you dont use this versioning then you may need to clear the cache of refresh the page in order to view the recent changes in those files.

Here is an article that explains this thing How and Why to make versioning of CSS and JS files

---

During development / testing of new releases, the cache can be a problem because the browser, the server and even sometimes the 3G telco (if you do mobile deployment) will cache the static content (e.g. JS, CSS, HTML, img). You can overcome this by appending version number, random number or timestamp to the URL e.g: JSP: <script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

In case you're running pure HTML (instead of server pages JSP, ASP, PHP) the server won't help you. In browser, links are loaded before the JS runs, therefore you have to remove the links and load them with 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);
}

---

As you can read before, the ?v=1 ensures that your browser gets the version 1 of the file. When you have a new version, you just have to append a different version number and the browser will forget about the old version and loads the new one.

There is a gulp plugin which takes care of version your files during the build phase, so you don't have to do it manually. It's handy and you can easily integrate it in you build process. Here's the link: gulp-annotate

---

As mentioned by others, this is used for front end cache busting. To implement this, I have personally find grunt-cache-bust npm package useful.

참고URL : https://stackoverflow.com/questions/3466989/what-does-appending-v-1-to-css-and-javascript-urls-in-link-and-script-tags-do