XAMPP를 통해 WordPress 소스 코드를 기반으로 웹 사이트를 개발 중입니다. 때로는 CSS 코드, 스크립 또는 다른 것을 변경하고 브라우저가 수정 사항을 적용하는 데 시간이 걸리는 것을 알았습니다. 이로 인해 여러 브라우저를 사용하여 하나를 새로 고치고 새 스타일을 적용하지 않으면 두 번째 스타일을 시도하고 항상 이것입니다.
이 문제를 피할 수있는 방법이 있습니까? 때로는 이전 수정 사항을 통보하지 않고 코드를 변경합니다.
답변
일반 솔루션
Ctrl+ F5(또는 Ctrl+ Shift+ R)를 눌러 캐시를 강제로 다시로드합니다. 나는 Mac이 Cmd+ Shift+를 사용한다고 생각 R합니다.
PHP
PHP에서는 만료 날짜를 헤더가있는 과거 시간으로 설정하여 캐시를 비활성화 할 수 있습니다.
header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
크롬
로 개발자 도구를 열고 F12오른쪽 하단의 톱니 바퀴 아이콘을 클릭 한 다음 설정 대화 상자에서 캐시 사용 안함을 선택하여 다음과 같이 Chrome 캐시를 사용 중지 할 수 있습니다 .
이 답변 에서 가져온 이미지 .
Firefox
입력 about:config한 후 제목 항목을 찾을 URL 표시 줄에 network.http.use-cache. 이것을로 설정하십시오 false.
답변
클라이언트 측에서이를 피 ?v=1.x하려면 파일 내용이 변경 될 때 css 파일 링크 와 같은 것을 추가 할 수 있습니다 . 예를 들어 <link rel="stylesheet" type="text/css" href="css-file-name.css">변경 <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">이 가능하면 캐싱을 우회합니다.
답변
PHP를 작성할 수 있다면 다음과 같이 작성할 수 있습니다.
<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />
항상 새로 고침됩니다!
편집 : 물론 모든 웹 사이트에 대해 수동으로 추가하지 않기 때문에 전체 웹 사이트에 실제로 실용적이지 않습니다.
답변
확인 : 브라우저가 내 스타일 시트의 최신 버전을 사용하도록하려면 어떻게해야합니까?
css 파일이라고 가정 foo.css하면 아래와 같이 쿼리 문자열을 추가하여 클라이언트가 최신 버전을 사용하도록 할 수 있습니다.
<link rel="stylesheet" href="foo.css?v=1.1">
답변
개발자 관점
(원래 질문에서와 같이) 개발 모드에있는 경우 가장 좋은 방법은 HTML 메타 태그를 통해 브라우저에서 캐싱을 비활성화하는 것입니다. 이 접근 방식을 보편적으로 만들려면 아래와 같이 메타 태그를 3 개 이상 삽입해야합니다.
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
이러한 방식으로 개발자는 변경 사항을 확인하기 위해 페이지를 새로 고치기 만하면됩니다. 그러나 모든 캐싱은 클라이언트에게 좋은 일이므로 프로덕션 단계에서 해당 코드를 주석 처리하는 것을 잊지 마십시오.
프로덕션 모드 프로덕션
에서는 캐싱을 허용하고 클라이언트는 전체 다시로드 또는 기타 트릭을 강제하는 방법을 알 필요가 없기 때문에 브라우저가 새 파일을로드 할 것이라고 보증해야합니다. 예,이 경우 제가 아는 가장 좋은 방법은 파일 이름을 변경하는 것입니다.
답변
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
수정하면 새로 고침됩니다.
답변
이것이 DNS에서 발생하지 않는지 확인하십시오. 예를 들어 Cloudflare에는 Cloudflare가 가속화 된 캐시를 제공하므로 스타일 시트와 이미지를 강제로 제거하는 개발 모드를 켤 수있는 기능이 있습니다. 이것은 그것을 비활성화하고 누군가가 귀하의 사이트를 방문 할 때마다 업데이트하도록 강제합니다.
