Eleventy의 캐시 무효화: Sass를 사용한 더 간단한 방법

Eleventy SSG(정적 사이트 생성기) 및 Sass을 사용하여 웹 사이트를 구축하는 경우 멋진 내용을 읽어보십시오.

2020년 말에 I wrote three posts Eleventy 사이트의 CSS에서 "캐시 무효화"를 수행하여 대부분의 웹 브라우저가 최신 스타일을 안정적으로 표시하도록 하는 방법에 대해 설명했습니다. 결국 package.json 스크립팅과 빌드 타임 JavaScript 실행의 조합을 통해 이를 달성하는 방법을 제안했습니다. 작동했지만 개발 모드에서는 다소 시간이 걸렸습니다. 게다가 SSG의 내장된 자산 파이프라인인 Hugo을 통해 Hugo Pipes에서 수행할 수 있는 방법보다 훨씬 복잡합니다. 그래서 더 좋은 방법을 계속 찾아봤습니다.

이제 찾았습니다.

Kentaro Imai: eleventy-sass 및 eleventy-plugin-rev 에 의해 최근 도입된 두 가지 Eleventy 플러그인의 형태로 제공됩니다. 전자는 Sass-to-CSS 컴파일을 제공하고 후자는 캐시 무효화를 위한 버전 관리 기반 파일 이름 변경을 제공하기 위해 액세스할 수 있는 필터를 추가합니다.

이렇게 간단합니다. 먼저 Eleventy 프로젝트 디렉토리로 이동하여 npm에서 두 개의 플러그인을 설치합니다.

npm i -D eleventy-sass eleventy-plugin-rev

그런 다음 이 간단한 예에서와 같이 프로젝트의 구성 파일(일반적으로 최상위 .eleventy.js 파일)에 등록합니다(사용 가능한 옵션에 대한 자세한 내용은 eleventy-sass documentation 참조).

const pluginRev = require("eleventy-plugin-rev");
const eleventySass = require("eleventy-sass");

module.exports = function(eleventyConfig) {

  eleventyConfig.addPlugin(pluginRev);
  eleventyConfig.addPlugin(eleventySass, {
    rev: true
  });

  /*
    other Eleventy config as usual...
  */
}

마지막으로 사이트 전체 head 태그에 대한 템플릿에 다음을 추가합니다(다음은 index.scss 내에 src/styles/ 파일이 있다고 가정함).

<link rel="stylesheet" href="{{ "/styles/index.css" | rev }}" type="text/css" />

그게 다야!

2020년의 내 방법과 비교할 때 이것은 package.json에서 이상한 회전이 필요하지 않으며 JavaScript에서 빌드 시간 기계가 필요하지 않습니다. 훨씬 깔끔하고 간편합니다.

이제 Eleventy를 실행할 때마다 eleventy-sass과 eleventy-plugin-rev의 콤보는 index.scss 또는 index.scss이 @use일 수 있는 partials으로 변경할 때마다 변경되는 해시 파일 이름을 가진 CSS 파일을 생성합니다. (그리고 @use 이 아닌 @import 을 원할 것입니다. 왜냐하면 eleventy-sass 의 Sass-to-CSS 컴파일은 Dart Sass LibSass가 아닌 deprecated 으로 완료되기 때문입니다.)

부수적으로: 개발 모드에서 이 설정에 대한 내 자체 테스트에서 Eleventy의 --incremental 플래그는 SCSS를 변경할 때 개발 서버의 새로 고침 기능이 이름이 변경된 CSS 파일을 호출하지 못하도록 합니다(따라서 이름 변경이 발생함). 또한 저는 이것이 Eleventy 1.x와 아직 개발 중인 Eleventy 2.x 모두에서 사실임을 발견했습니다. 따라서 SCSS를 변경할 때마다 개발 서버 새로 고침을 수행하지 않으려면 --incremental을 사용하지 않는 것이 좋습니다.

그 작은 불만은 차치하고 모든 Eleventy/Sass 사용자가 Kentaro Imai의 깔끔한 코딩 덕분에 이 빠른 구성 개선 사항을 채택하는 것을 고려하도록 권장합니다. 내가 아직 경험하지 못한 Eleventy용 다른 Sass 사용 캐시 버스팅 솔루션보다 훨씬 깨끗하고 단 몇 분 만에 설치하고 실행할 수 있습니다.