캐시 된 항목을 새로 고치려면 img 태그의 이미지에 querystring을 추가하고 css의 이미지를 추가해야합니까?

Question

나는 css, javascript 및 image 파일에 대해 만료 시간을 멀리 설정하고 모든 브라우저가 querystring을 추가하거나 파일 이름을 변경하여 파일이 변경되는 즉시 최신 내용을 가져온다는 것을 알고 있습니다.

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

나 :

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

를 이것에

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

같은

하지만 CSS 파일에서 참조되는 이미지는 무엇입니까?

// Inside base.css 
background: url(/img/logo.png) 

// Is this necessary(?): 
background: url(/img/logo.png?v=1234) 

또는 base.css 자동 base.css?v=1234 또는 base_1234.css에 파일 이름을 변경하면 다시로드 /img/logo.png 것인가?

또한 src의 이미지는 img 태그에 포함됩니까?

Answer 1

절대 경로를 결정한 후 브라우저에서 이러한 요청을 수행하므로 정적 애셋을 이런 방식으로 '캐시 무효화'하는 경우 호출 된 위치에 관계없이 각 파일에 대해 개별적으로 수행해야합니다. 그러나 백엔드에서 변수를 만들어서 쉽게 만들 수 있습니다.

문자열을 변수에 추가하면 백엔드의 한 위치에서만 업데이트 할 수 있습니다. 예를 들어 LESS 또는 SASS와 같은 CSS 전처리 프로그램을 사용하면 모든 이미지를 가져올 수 있습니다.

또는 기본 URL (site.com/folder/styles.css => site.com/v123/folder/styles.css)에 버전을 추가하여 상대적 경로를 사용하십시오. 이것은 앱의 기존 정적 자산 기반 url 변수에 추가 할 수 있습니다. 그런 다음 서버에서 UrlRewrite를 사용하여 버전을 제거 할 수 있습니다. 이렇게하면 CSS에서 상대적으로 참조되는 모든 이미지가 자동으로 동일한 '캐시 무효화'효과를 갖는 버전을 얻게됩니다.

당신은 더 영리하고 버전 제어 시스템의 마지막 커밋 해시로서 빌드 프로세스의 일부로 자동으로 변수를 설정할 수 있습니다. 그러면 향후 디버깅을 더 쉽게 할 수 있습니다.

Answer 2

내 경험에 비추어 볼 때 캐시의 캐시 해킹은 재귀 적이 아닙니다. 그래서 css에서 참조 된 이미지 끝에있는 쿼리 문자열은 캐시를 파싱해야합니다.

모든 이미지가 깨끗한 지 확인하려면 쿼리 문자열 버전 (img.png? v = 1234)을 사용하여 바스트를 캐싱 할 수도 있습니다.

Answer 3

크롬은 를 쿼리 문자열로 참으로이 작업을 수행하는 방법 (그것 때문에을 사용하고 새로운 예측 캐싱 방법에 아마도 )는 캐시의 업데이트하지 않는 브라우저 무리의 악화 될 것으로 보인다.

이 website 진일보을 취하고 (또는 jQuery를없이 ) img 모든 태그에 부착 된 스크립트 Date().getTime(); 간단한 방법을 사용한다.

또 다른 해결책은 브라우저에서 이미지 을 가져 오지 않고 매번로드하도록 자바 스크립트 코드를 작성하는 것입니다.

위의 이점은 JavaScript가 한 번에 처리 할 때 쿼리 문자열을 위해 개별 이미지 파일 이름 바꾸기가 필요하지 않다는 것입니다.

이것을 달성하기 위해 JavaScript 한 줄을 사용하지만 많은 CSS 파일에있는 img 요소를 모두 추적하는 것만 큼 높은 유지 관리 작업은 아니며 시간이 걸리고 파일 크기에 추가 할 수 있습니다.