개발 중에 캐싱을 어떻게 피합니까?

사이트 변경 사항의 모양을 테스트 할 때 모든 캐싱을 방지하는 간단한 방법이 있습니까? WP Super Cache를 사용합니다. 제공된 옵션을 사용하여 캐시를 삭제하고 브라우저의 캐시를 삭제해도 여전히 CSS 또는 위젯의 일부 변경 사항이 새로 고쳐지지 않습니다. 브라우저 나 컴퓨터 전환과 같은 다른 해결 방법을 시도하지만 이전에 캐시 된 형식이 아닌 변경 사항을 볼 수 있도록보다 간소화 된 워크 플로가 있어야합니까? 가장 좋은 해결책은 무엇입니까?

filemtime()스타일 시트를 버전 매개 변수로 추가하십시오 . 기본 스타일 시트가에 css/default.css있고 css/default.min.css(가 아님style.css ) 이라고 가정 해 봅시다 . wp_loaded( 아닌init ) 에 스타일 시트를 등록하면 버전을 네 번째 매개 변수로 전달할 수 있습니다. 그 시간은 마지막으로 수정 된 시간이므로 파일을 변경할 때마다 변경됩니다.

$min    = WP_DEBUG ? '': '.min';
$file   = "/css/default$min.css";
$url    = get_template_directory_uri() . $file;
$path   = get_template_directory() . $file;
$handle = get_stylesheet() . '-default';

// Overridden?
if ( is_child_theme() && is_readable( get_stylesheet_directory() . $file ) )
{
    $url  = get_stylesheet_directory_uri() . $file;
    $path = get_stylesheet_directory()     . $file;
}

$modified = filemtime( $path );

add_action( 'wp_loaded', function() use ( $handle, $url, $modified ) {
    wp_register_style( $handle, $url, [], $modified );
});

add_action( 'wp_enqueue_scripts', function() use ( $handle ) {
    wp_enqueue_style( $handle );
});

Node.js 및 Grunt를 사용하는 경우 Browsersync를 강력히 권장 합니다. 파일을보고 변경 될 때마다 즉시 업데이트합니다. 또한 여러 열린 브라우저에서 스크롤 위치, 양식 제출 등을 동기화 할 수 있습니다. 매우 시원합니다.

간단한 솔루션을 여러 번 검색 한 후 작동하는 것을 찾기로 결정했습니다!

그래서 ... 그것에 대해 생각한 후 새로운 웹 사이트를 개발하는 동안 캐싱을 재정의하는 좋은 방법을 찾았습니다 ...

우리가 필요한 것은 wp에게 이것이 새로운 CSS 버전이라는 것을 알리는 것입니다 ...

변경하기 전에 :

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), false, 'all' );

변경 후 :

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );

이것이 우리가 추가 한 것입니다.

?v='.time()

설명 :
기본적으로 css 파일에 동적 버전 번호를 추가하여 업데이트 할 때마다 브라우저가 새 CSS를로드하도록합니다.

그렇지 않으면 캐싱이이 파일에 대해 작동하지 않으며 다시 사용자를 다시로드하기 위해로드 될 것입니다.

이 기술은 CSS 및 JS 파일에 적용됩니다.

이것은 지나치게 단순 해 보일 수 있지만 사이트의 개발 부분이 완료 될 때까지 캐싱을 비활성화하는 것은 어떻습니까? 켜고 끄는 것보다 간단합니다.

이 질문에 대한 답변이 허용 된 것으로 알고 있지만 해당 답변이 아직 문제에 대해 너무 복잡하고 사용자에 따라 실제로 잘못 될 수 있다고 생각합니다 (오해하지는 않음). 개발을 할 때 캐싱을 우회하는 방법 (Wordpress뿐만 아니라).

대부분의 최신 브라우저에는 시크릿 모드 라는 것이 있습니다 . 이 모드에서는 컴퓨터의 아무것도 캐시되지 않으므로 새로 고칠 때마다 서버에서 새 슬레이트를 다운로드합니다. Internet Explorer에서을 누릅니다 Ctrl + Shift + P. Firefox 및 Chrome에서을 누릅니다 Ctrl + Shift + N.

브라우저에 시크릿 모드가없는 경우 일반적으로 Ctrl + F5IE 를 누르 거나 Ctrl + Shift + RFirefox 및 Chrome 에서을 눌러 강제로 다시로드 할 수 있습니다 .

CSS 파일 (및 기본적으로 이미지 및 Javascript 파일과 같은 모든 자산 파일)에 관한 질문에 대해서는 WP Super Cache에 의해 캐시되지 않습니다. 이 플러그인의 설정 및 / 또는 사용은 해당 파일이 제공되는 방식에 영향을 미치지 않습니다 . 해당 파일을 캐싱하는 것은 브라우저 이며 하드 리로드를 수행하는 이유입니다.

플러그인은 Wordpress가 PHP를 통해 HTML 파일을 작성하고 사본을 저장하는 방법을 평가하여 다음에 누군가가 동일한 게시물, 페이지 또는 무엇이든 요청할 때 사본을 제공하므로 사본을 제공하지 않습니다. PHP에서 생성 한 HTML을 다시 평가하여 컴퓨팅 시간을 절약하여 페이지를 훨씬 빠르게로드하십시오. (나는 그것이 분명하기를 바랍니다.)

그게 문제는 PHP 함수를 통해 CSS 파일 'URL에 타임 스탬프에 당신이 경우에있는 거 두드림,이다 인 HTML에 PHP 평가, 그것은 것입니다 WP 슈퍼 캐시에 의해 캐시 될 수있다. 사용자에게 원래 타임 스탬프 평가 사본이 제공되므로 동일한 게시물에 대한 모든 요청에는 동일한 타임 스탬프가 있습니다. (틀 렸으면 말해줘.)

WP Super Cache의 캐싱을 우회하는 올바른 방법 은 플러그인 설정 페이지에서 옵션 Don't cache for known users을 설정하는 것 true입니다.

시크릿 또는 강제 하드 리로드를 사용하여 HTML 페이지에 불필요한 마크 업을 추가 할 필요는 없습니다. 물론 타임 스탬프를 추가하면 요청 당 정적 파일 당 약 13 바이트 만 추가되지만, 내가 말했듯이, 나는 이런 종류의 물건에 대한 stickler입니다. 여전히 13 바이트가 필요하지 않습니다.

어이, 이것에 대답하는 많은 방법! 가장 먼저, WP Super Cache와 CSS 파일의 두 가지에 대해 물었습니다. 이들은 서로 다른 장소에서 다르게 캐시되므로 문제의 위치를 ​​인식하는 것이 중요합니다.

WP Super Cache 인 경우 WP Super Cache가 DONOTCACHEPAGE어떤 것도 캐싱하지 않도록 개발 중에 functions.php에서 상수 를 정의 할 수 있습니다 . 시작시 이것을 제거하는 것을 잊지 마십시오!

define('DONOTCACHEPAGE', true);

각 사이트에는 URL에 추가 할 수있는 고유 한 키가있어 "고급"탭에서 찾을 수있는 최신 버전의 페이지를로드합니다.

더 나은 솔루션으로 분류하려면 개발 환경에 WP Super Cache가 활성화되어 있지 않은 개발 환경과 프로덕션 환경을 설정하는 것이 좋습니다 (다시 말해서 문제라고 가정).

CSS / JS 파일에 문제가있는 경우 toscho의 답변과 위의 m0r7if3r의 주석을 참조하십시오.

관리자로 로그인하면 HyperCache가 캐싱을 비활성화합니다. WP Super Cache의 기능이 같은지 확실하지 않습니다.

Chrome을 사용하는 경우 (권장 사항) Inspector를 열고 오른쪽 하단에서 설정 아이콘을 클릭 한 다음 "네트워크"에서 "캐시 비활성화"를 선택하십시오.

wp 수퍼 캐시에 대해 말했지만 다음과 같은 wp-config.php 변경 사항의 일반적인 WP 캐싱에 대해서는 다음과 같습니다.

define( 'WP_CACHE', false );

참조 : codex.wordpress.org

이 스 니펫을 사용할 수 있습니다 https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

페이지를로드 할 때마다 활성 테마 CSS 및 JS의 새 버전이 생성됩니다.