CSS 및 JS URL을 버전 화하는 가장 좋은 방법은 무엇입니까?


26

야후의 사이트 속도 향상을위한 모범 사례에 따라 , 우리는 미래의 캐시 만료 헤더를 사용하여 CDN에서 정적 컨텐츠를 제공합니다. 물론, 우리는 때때로 이러한 "정적"파일을 업데이트해야하므로, 현재 파일 내용의 일부 (파일 내용의 SHA1 합계에 기초하여)에 접두어 버전을 추가합니다. 그러므로:

styles.min.css

된다 :

styles.min.abcd1234.css

그러나 버전이 지정된 파일을 관리하는 것은 지루할 수 있으며 GET 인수 표기법이 더 깨끗하고 나은지 궁금합니다.

styles.min.css?v=abcd1234

어느 것을 사용하고 왜? 고려해야 할 브라우저 또는 프록시 / 캐시 관련 고려 사항이 있습니까?


내가 묻는 이유는 GET 인수 스타일을 사용하지 않는 이유를 듣는 것을 기억하기 때문이지만 그 이유를 기억할 수 없습니다.
— David Eyk

GET 인수를 사용하지 않으면 서버 측 스크립트와 함께 스타일 시트를 제공해야합니까 (더 이상 정적이지 않음)?
— Lotus Notes

@Lotus : GET 인수를 보낼 수 있으며 아무것도 찾지 못하면 자동으로 무시됩니다.
— David Eyk

답변:


10

Google의 빠른 웹 제작 에 따르면 쿼리 매개 변수가있는 페이지는 많은 HTTP 프록시에 의해 캐시되지 않습니다.

대부분의 프록시, 특히 3.0 버전까지의 Squid는 "?"로 리소스를 캐시하지 않습니다. Cache-control: public응답에 헤더가 있어도 URL에 이러한 자원에 대한 프록시 캐싱을 사용하려면 정적 자원에 대한 참조에서 조회 문자열을 제거하고 대신 매개 변수를 파일 이름 자체로 인코딩하십시오.

styles.min.abcd1234.css선호되는 솔루션도 마찬가지 입니다. 적절한 URL 재 작성 메커니즘을 사용 styles.min.abcd1234.css하여보다 쉽게 ​​구현할 수 styles.min.css?v=abcd1234있습니다.

HTTPS 만 지원하는 경우 프록시는 일반적으로 SSL을 통해 제공되는 페이지를 캐시 할 수 없으므로 해당 조언이 적용되지 않습니다.


2
쿼리 문자열 캐싱 및 프록시 서버에 관한 정보가 약간 오래된 지 궁금합니다. Google 문서는 더 이상이 컨텍스트에서 쿼리 문자열 및 프록시 서버를 참조하지 않습니다. 하지만 예제는 여전히 파일 이름 자체를 변경 포함 않습니다. Squid 2.7 (2008) 및 3.1 (2010) 은 기본적으로 쿼리 문자열 캐싱을 지원하며 이전 버전에서는이를 지원하도록 구성 할 수 있습니다.
— MrWhite

15

빈 캐시에서 GET 스타일 버전 관리를 사용하면 여러 URL (예 : style.css?v=123and) style.css?v=456이 동일한 내용을 반환합니다. 그러나 특히 한 번에 하나만 링크하기 때문에 이것이 문제가되는 것을 볼 수 없습니다.

GET 스타일을 유지 관리하기가 훨씬 쉽다고 생각합니다. 별도의 파일이 필요하지 않습니다. URL을 변경하면 브라우저가 CSS를 새로 가져옵니다.

업데이트 : 추가 연구에서 쿼리 문자열을 사용하면 브라우저 가 파일 캐싱을 중지 할 수 있습니다. 그러나 이와 같은 올바른 헤더를 반환하는 경우 Expires에는 문제가되지 않습니다.

업데이트 2 : 허용 된 답변에 따르면 일부 프록시는 쿼리 문자열로 파일을 캐시하지 않습니다. 그러나 이것은 오래된 정보를 기반으로합니다. 그들이 오징어에서 언급 한 특정 문제는 7 년 전에 수정되었습니다. 인상적인 웹은 이것에 대해 잘 작성했습니다 .


그것이 내가 기억하려고하는 경고입니다. 링크 주셔서 감사합니다.
— David Eyk

1

쿼리 문자열이 URL의 일부로 간주되므로 둘 다 동일하게 작동합니다. URL을 변경하면 실제로 리소스 이름을 변경하여 브라우저가 파일의 새 사본을 가져옵니다.

나는 당신이 유지하기 쉬운 방법을 사용한다고 말합니다.


0

이것은 위의 질문에 대한 답변이 아닙니다 . 더 나은 해결책을 원하므로 여기에서 스스로를 묻습니다.

두 가지 방법 모두 css 및 js 파일이 참조되는 파일을 수정해야합니다. 따라서 변경 후 응용 프로그램 서버를 다시 시작해야합니다.

Application Server를 다시 시작하지 않고도 정적 파일의 버전 관리를 처리 할 수있는 더 좋은 방법이 있습니까?

솔루션에서 다음이 제외됩니다.

  • CSS 및 JS 파일 이름 변경
  • URL에 쿼리 파레 미터 전달

이 솔루션은 캐시 제어 설정에 영향을 주거나 만료되지 않아야합니다.

감사


1
당신이 여기 새로 온 것 같습니다. 좋은 질문입니다. 참조 용 으로이 질문에 다시 연결하여 게시해야합니다. 나는 그들이 당신을 도울 수 있도록 중재자 관심을 위해 이것을 플래그했습니다.
— David Eyk

David가 지적했듯이이 사이트는 다른 포럼 사이트와 다릅니다. 새로운 질문이 있으시면 언제든지 "질문 버튼"을 클릭하십시오
— Mark Henderson

이것은 유용한 설명입니다. 스타일 시트를 변경하는 경우 사이트 전체에서 수백 개의 참조를 업데이트하는 대신 이름과 참조를 동일하게 유지하는 것이 좋습니다.
— Mark Stosberg
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.