프로덕션 환경에서 Eleventy의 JS 축소

이 튜토리얼은 11ty 프레임워크용으로 작성되었으며 Netlify에서 앱을 호스팅할 예정입니다. Cloudflare 및 Vercel과 같은 다른 플랫폼도 이와 유사한 지원을 제공합니다.

이 자습서의 목표는 로컬 개발 환경의 속도를 높이고(코드를 로컬에서 축소하는 데 리소스를 사용하지 않음) 프로덕션 환경에서 자바스크립트 코드가 축소되었는지 확인하는 것입니다.

단계

1) 환경 변수를 사용할 수 있도록 dotenv 패키지를 설치합니다.npm install dotenv
2) .env 파일을 생성하고 .gitignore 에 추가합니다.

3) .env 안에 이 줄ENVIRONMENT=local을 추가하고 저장합니다.

4) eleventy.js 파일 맨 위에 Dotenv를 추가합니다.require('dotenv').config();
5) Netlify에 로그인하고 사이트로 이동합니다.

6) "사이트 설정"을 클릭합니다.


7) 사이드바에서 "빌드 및 배포"링크를 클릭합니다.


8) 그런 다음 "환경"하위 링크를 클릭합니다.


9) "변수 편집"버튼을 클릭합니다.


10) 동일한 키 "ENVIRONMENT"를 추가하고 값을 "production"으로 설정합니다.


11) 꼭 저장하세요!

12) 코드베이스에서 Terser 패키지가 설치되어 있는지 확인하십시오.npm install terser
13) Terser를 eleventy.js 파일 상단으로 가져오기const { minify } = require("terser");
14) 11ty dev 사이트의 튜토리얼에 따라 다음과 같이 Terser를 추가(또는 기존 구현 사용)할 수 있습니다.
https://www.11ty.dev/docs/quicktips/inline-js/

eleventyConfig.addNunjucksAsyncFilter("jsmin", async function (
  code,
  callback
) {
  try {
    const minified = await minify(code);
    callback(null, minified.code);
  } catch (err) {
    console.error("Terser error: ", err);
    // Fail gracefully.
    callback(null, code);
  }
});

15) 새 필터 내부에서 minify 함수를 if 문으로 래핑합니다.

eleventyConfig.addNunjucksAsyncFilter("jsmin", async function (
    code,
    callback
) {
    try {
        if(process.env.ENVIRONMENT === "production") {
            const minified = await minify(code);
            callback(null, minified.code);
        } else {
            callback(null, code);
        }
    } catch (err) {
        console.error("Terser error: ", err);
        // Fail gracefully.
        callback(null, code);
    }
});

16) nunjuck 파일, markdown 또는 liquid 파일 내에서 이제 생산 중임을 감지한 경우에만 코드를 축소하는 새 필터를 참조할 수 있습니다!

{% set js %}
    {% include "source/_includes/partial-js/authentication.js" %}
    {% include "source/_includes/partial-js/scripts.js" %}
    {% include "source/_includes/partial-js/profile.js" %}
{% endset %}
{{ js | jsmin | safe }}