빠른 Gulp 캐시 파열

최적의 웹 성능을 위해서는 CSS, JavaScript, 이미지 및 글꼴과 같은 자산에 대한 강력한 캐싱 전략을 구현하는 것이 중요합니다. 이를 통해 브라우저는 이러한 파일을 유지하여 사이트 내 재 방문 또는 탐색시 페이지로드 시간 속도를 크게 높일 수 있습니다. 그러나 이러한 자산을 업데이트하려면 브라우저가 새로운 버전을 다운로드하도록하는 방법이 필요합니다. 몇 가지 기술이 존재하지만이 기사는 Gulp를 사용한 최근 접근법을 자세히 설명합니다.

캐시 파열에 대한 쿼리 문자열 수정을 활용합니다

초기 신념과는 달리, 쿼리 문자열 수정은 캐시 파열에 효과적인 방법으로, 특히 CloudFlare와 같은 서비스와 같은 서비스와 같은 서비스가 가능합니다.

처음에 HTML은 다음과 같은 자산 링크를 포함 할 수 있습니다.

<link href="style.css?v=1" rel="stylesheet">

그 후 캐시 새로 고침을 강제하려면 쿼리 문자열 값을 변경합니다.

<link href="style.css?v=2" rel="stylesheet">

HTML 자체는 일반적으로 캐시 지속 시간이 짧거나 캐시되지 않으므로 HTML 변경의 즉각적인 가시성을 보장합니다.

수동 대 자동 캐시 파열

이전에는 PHP 변수를 직접 수정하는 수동 캐시 파열이 포함되었습니다.

  php $ ver = 1.0; ?> <link href="style.css?v=<?php%20echo%20%24ver;%20?>" rel="stylesheet"><link href="some-other-asset.css?v=<?php%20echo%20%24ver;%20?>" rel="stylesheet">

이 방법은 기능적이지만 감독하기 쉬운 것으로 판명되었으며 일반적으로 번거 롭습니다.

Gulp 및 Gulp-Replace로 자동화

SASS 컴파일, 바벨 변환 및 파일 연결과 같은 작업을 처리하는 GULP 기반 빌드 프로세스를 사용하면 자동화 된 캐시 파열이 가능합니다. gulp-replace 플러그인은이 프로세스를 단순화합니다.

헤더 파일 내에서 특정 문자열 (예 : cache_bust= )을 검색하고 동적으로 생성 된 타임 스탬프 기반 문자열로 바꾸려면 GULP 작업을 작성할 수 있습니다.

 gulp.task ( "Cache-Bust-CSS", function () {
  var cbstring = new date (). gettime ();
  Gulp를 반환합니다
    .src ([ "header.php"])
    .파이프(
      대체 ( /cache_bust = \ d /g, function () {
        "CACHE_BUST ="CBSTRING을 반환합니다.
      })
    ))
    .pipe (gulp.dest ( "."));
});

JavaScript 파일에 대해 유사한 작업을 구현할 수 있습니다.

효율성 최적화

현재 구현은 자산이 변경 될 때마다 모든 CSS 자산에 대한 쿼리 문자열을 업데이트합니다. 보다 효율적인 접근 방식에는 수정 된 파일 만 타겟팅하는 것이 포함됩니다. 이 최적화는 향후 구현을 위해 계획되어 있습니다.

이 GULP 기반 전략은 하나의 접근 방식 일뿐입니다. 다른 Gulp 플러그인 및 빌드 시스템은 대체 방법을 제공합니다. 이 솔루션은이 프로젝트의 특정 요구를 효과적으로 해결합니다. 선호하는 캐시 버스트 기술을 자유롭게 공유하십시오!

위 내용은 빠른 Gulp 캐시 파열의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!