javascript - 프로그램 - 크롬 자바스크립트 오류




브라우저에서 CSS 및 자바 스크립트 변경 사항을 볼 수있게하려면 어떻게해야합니까? (4)

CSS 및 Javascript 파일은 자주 변경되지 않으므로 웹 브라우저에서 캐싱해야합니다. 그러나 사용자가 브라우저 캐시를 지우지 않아도 웹 브라우저가이 파일의 변경 내용을 보길 원합니다. 또한 Subversion과 같은 버전 제어 시스템에서 잘 작동하는 솔루션이 필요합니다.

필자가 보았던 몇 가지 해결책은 파일 끝에 쿼리 ​​문자열 형식으로 버전 번호를 추가하는 것입니다.

이것을 자동화하기 위해 SVN 개정 번호를 사용할 수 있습니다 : ASP.NET 표시 SVN 개정 번호

다른 파일의 Revision 변수를 포함하는 방법을 지정할 수 있습니까? 그것은 HTML 파일에 있으며 CSS 또는 Javascript 파일의 URL에 수정 번호를 포함 할 수 있습니다.

Subversion 책 에서는 Revision에 대해 : "이 키워드는이 파일이 저장소에서 변경된 마지막으로 알려진 개정판을 설명합니다."

파이어 폭스는 CTRL + R 을 눌러 특정 페이지의 모든 내용을 다시 불러올 수 있도록합니다.

명확히하기 위해 사용자가 자신의 입장에서 아무 것도하지 않아도되는 솔루션을 찾고 있습니다.


CSS 또는 JS 라이브러리의 새 버전을 릴리스하면 다음과 같이됩니다.

  1. 고유 한 버전 문자열을 포함하도록 파일 이름 수정
  2. 버전이 지정된 파일을 가리 키도록 라이브러리를 참조하는 HTML 파일을 수정하십시오.

(이것은 일반적으로 릴리스 스크립트의 경우 매우 간단합니다)

이제 CSS / JS의 Expires를 향후 몇 년으로 설정할 수 있습니다. 내용을 변경할 때마다 참조하는 HTML이 새 URI를 가리키면 브라우저는 더 이상 이전 캐시 된 사본을 사용하지 않습니다.

이로 인해 사용자의 아무 것도 요구하지 않고 원하는 캐싱 동작이 발생합니다.


URL의 끝에 마지막으로 수정 한 파일의 타임 스탬프를 추가하면 브라우저가 파일을 수정할 때 파일을 요청합니다. 예를 들어 PHP에서 :

function urlmtime($url) {
   $parsed_url = parse_url($url);
   $path = $parsed_url['path'];

   if ($path[0] == "/") {
       $filename = $_SERVER['DOCUMENT_ROOT'] . "/" . $path;
   } else {
       $filename = $path;
   }

   if (!file_exists($filename)) {
       // If not a file then use the current time
       $lastModified = date('YmdHis');
   } else {
       $lastModified = date('YmdHis', filemtime($filename));
   }

   if (strpos($url, '?') === false) {
       $url .= '?ts=' . $lastModified;
   } else {
       $url .= '&ts=' . $lastModified;
   }

   return $url;
}

function include_css($css_url, $media='all') {
   // According to Yahoo, using link allows for progressive 
   // rendering in IE where as @import url($css_url) does not
   echo '<link rel="stylesheet" type="text/css" media="' .
        $media . '" href="' . urlmtime($css_url) . '">'."\n";
}

function include_javascript($javascript_url) {
   echo '<script type="text/javascript" src="' . urlmtime($javascript_url) .
        '"></script>'."\n";
}

필자가 보았던 몇 가지 해결책은 파일 끝에 쿼리 ​​문자열 형식으로 버전 번호를 추가하는 것입니다.

<script type="text/javascript" src="funkycode.js?v1">

SVN 개정판 번호를 사용하여 위의 v1이 표시된 후 html 파일에 LastChangedRevision 이라는 단어를 포함시켜 자동화할 수 있습니다. 또한 저장소를 설정해야합니다.

이게 내 대답을 더 분명히하기를 바란다.

파이어 폭스는 CTRL + R 을 눌러 특정 페이지의 모든 내용을 다시 불러올 수 있도록합니다.


필자의 의견으로는 myscript.1.2.3.js 와 같이 파일 자체의 버전 번호 부분을 만드는 것이 더 좋습니다. 이 파일을 영원히 캐시하도록 웹 서버를 설정할 수 있으며 새 버전이있을 때 새 js 파일을 추가하기 만하면됩니다.





caching