Eleventy 빌드를 축소하는 방법

Eleventy 빌드의 출력을 보면 코드가 여전히 매우 읽기 쉽고 템플릿에 데이터만 주입되었음을 알 수 있습니다. 모든 간격과 주석은 보존되었습니다. 디버깅 목적으로는 훌륭하지만 방문자가 웹사이트를 사용하기 위해 더 많은 바이트를 로드하므로 그다지 유용하지 않습니다. 😞

하지만 사용자 경험을 개선하지 않는 모든 문자를 제거할 수 있다면 어떨까요? 그 기술은 축소라고 하며 Eleventy가 기본적으로 이 기능을 지원하지 않더라도 프로세스 빌드에 추가하려면 몇 줄만 있으면 됩니다. 🤖

Eleventy는 템플릿의 출력을 수정할 수 있는 구성Transforms을 제공합니다. 이 옵션을 사용하면 생성된 코드를 가져와 파일이 작성되기 전에 축소하는 함수를 정의할 수 있습니다. 그것이 바로 우리가 필요로 하는 것입니다. 😊

Eleventy는 문서에서 HTML 파일을 축소하는 예도 제공합니다. 몇 가지 사소한 변경 사항과 함께 아래에 재현했습니다.

const htmlmin = require("html-minifier");

module.exports = (eleventyConfig) => {
  eleventyConfig.addTransform("htmlmin", (content, outputPath) => {
    if (outputPath.endsWith(".html")) {
      return htmlmin.minify(content, {
        collapseWhitespace: true,
        removeComments: true,  
        useShortDoctype: true,
      });
    }

    return content;
  });
};

Transforms Example: Minify HTML Output , 일레븐티에



이제 HTML 파일을 축소할 수 있지만 JSON 또는 XML 와 같은 다른 유형에 대해서도 동일한 작업을 수행하려는 경우 이 예제는 영감을 줄 수 있습니다.

여러분의 고통을 덜어드리기 위해 최근에 @sherby/eleventy-plugin-files-minifier npm 패키지를 만들었습니다! 이 플러그인은 다음 유형을 자동으로 축소할 수 있는 변환 함수를 등록합니다.

html

json

xml

xsl

webmanifest

이 플러그인을 추가하려면 npm으로 종속성을 설치하기만 하면 됩니다.

npm install @sherby/eleventy-plugin-files-minifier --save-dev

플러그인을 Eleventy 구성 파일에 추가하려면(.eleventy.js)

const eleventyPluginFilesMinifier = require("@sherby/eleventy-plugin-files-minifier");
module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(eleventyPluginFilesMinifier);
};

아주 간단하죠?

현재 구현은 파일 확장자를 확인하여 올바르게 축소하는 방법을 선택합니다. 파일도 Eleventy에서 작성해야 합니다. 🧱

빌드가 다른 유형을 축소하고 커뮤니티와 공유하고 싶다면 자유롭게 code repository on GitHub ! 주제를 추가했는지 확인하여 진행 상황에 반영됩니다! 🎉

그렇다면 이 새로운 플러그인에 대해 어떻게 생각하십니까?