브라우저가 캐시 된 CSS 및 JavaScript 파일을 강제로 다시로드하도록하는 방법

질문 : 브라우저가 캐시 된 CSS 및 JavaScript 파일을 강제로 다시로드하도록하는 방법

---

일부 브라우저 (특히 Firefox 및 Opera )는 브라우저 세션 간에도 .css 및 .js 파일의 캐시 된 복사본을 사용하는 데 매우 열성적이라는 것을 알게되었습니다. 이로 인해 이러한 파일 중 하나를 업데이트 할 때 문제가 발생하지만 사용자의 브라우저는 캐시 된 사본을 계속 사용합니다.

파일이 변경되었을 때 사용자 브라우저가 파일을 다시로드하도록하는 가장 우아한 방법은 무엇입니까?

이상적으로이 솔루션은 페이지를 방문 할 때마다 브라우저가 파일을 다시로드하도록 강제하지 않습니다.

John Millikin 과 da5id의 제안이 유용하다는 것을 알았습니다. 자동 버전 관리 라는 용어가 있습니다.

원래 솔루션과 John의 제안을 결합한 새로운 답변을 아래에 게시했습니다.

SCdF 가 제안한 또 다른 아이디어는 가짜 쿼리 문자열을 파일에 추가하는 것입니다. (타임 스탬프를 가짜 쿼리 문자열로 자동 사용하는 일부 Python 코드는 pi 에 의해 제출되었습니다 ..)

그러나 브라우저가 쿼리 문자열이있는 파일을 캐시할지 여부에 대한 논의가 있습니다. (우리는 브라우저가 파일을 캐시하고 나중에 방문 할 때 사용하기를 원합니다. 파일이 변경된 경우에만 다시 가져 오기를 원합니다.)

답변

---

이 솔루션은 PHP로 작성되었지만 다른 언어에도 쉽게 적용 할 수 있습니다.

원래 .htaccess json-1.3.js 와 같은 파일에 문제를 일으킬 수 있습니다. 해결책은 끝에 정확히 10 자리 숫자가있는 경우에만 다시 쓰는 것입니다. (10 자리 숫자는 2001 년 9 월 9 일부터 2286 년 11 월 20 일까지의 모든 타임 스탬프를 포함하기 때문입니다.)

먼저 .htaccess에서 다음 재 작성 규칙을 사용합니다.

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

이제 다음 PHP 함수를 작성합니다.

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

이제 CSS를 포함 할 때마다 다음과 같이 변경하십시오.

<link rel="stylesheet" href="/css/base.css" type="text/css" />

이에:

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

이렇게하면 링크 태그를 다시 수정할 필요가 없으며 사용자는 항상 최신 CSS를 볼 수 있습니다. 브라우저는 CSS 파일을 캐시 할 수 있지만 CSS를 변경하면 브라우저는이 URL을 새 URL로 인식하므로 캐시 된 사본을 사용하지 않습니다.

이것은 이미지, 파비콘 및 JavaScript에서도 작동 할 수 있습니다. 기본적으로 동적으로 생성되지 않는 모든 것.

출처 : https://stackoverflow.com/questions/118884/how-to-force-the-browser-to-reload-cached-css-and-javascript-files