Brotli 압축을 사용하여 자바스크립트 인라인 코드 최적화하기

01 Oct 2023

brotli

Brotli Compression

안녕하세요! 오늘은 웹 개발에서 매우 유용한 Brotli 압축을 사용하여 자바스크립트 인라인 코드를 최적화하는 방법에 대해 알아보겠습니다.

왜 Brotli 압축을 사용해야 할까요?

Brotli는 구글에서 개발한 압축 알고리즘으로, Gzip에 비해 더 효율적이고 높은 압축률을 제공합니다. 그 결과로 전송할 데이터의 크기를 줄이고 페이지 로드 속도를 향상시킬 수 있습니다. 특히 모바일 디바이스에서는 데이터 전송 속도가 제한적이므로 Brotli 압축이 더욱 중요해집니다.

Brotli 압축 사용 방법

Brotli 압축을 사용하기 위해서는 서버와 클라이언트 모두에서 지원되어야 합니다. 먼저 서버 측에서 Brotli 압축을 지원하도록 설정해야 합니다. 예를 들면 Nginx 웹 서버의 경우, 아래와 같이 설정 파일을 수정할 수 있습니다.

http {
  ...
  brotli on;
  brotli_comp_level 6;
  ...
}

위 설정은 Brotli를 활성화하고 압축 레벨을 6으로 설정하는 예시입니다.

다음으로는 클라이언트 측에서 Brotli 압축을 지원해야 합니다. 이를 위해 HTML의 <head> 태그 안에 <meta> 태그를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Accept-Encoding" content="br">
  <title>My Awesome Website</title>
</head>
<body>
  <!-- 웹 페이지 내용 -->
</body>
</html>

위의 예시에서 <meta http-equiv="Accept-Encoding" content="br"> 라인은 클라이언트 브라우저가 Brotli 압축을 지원할 경우 해당 압축 방식을 사용하도록 지시하는 역할을 합니다.

Brotli로 자바스크립트 인라인 코드 압축하기

자바스크립트 인라인 코드를 Brotli로 압축하기 위해서는 먼저 자바스크립트 코드를 문자열 형태로 가져와야 합니다. 그리고 그 문자열을 Brotli 압축 알고리즘을 사용하여 압축한 뒤, Base64로 인코딩합니다. 인코딩한 문자열을 다시 자바스크립트 코드에 삽입하여 실행할 수 있습니다.

다음은 Node.js를 사용한 예시 코드입니다.

const fs = require('fs');
const zlib = require('zlib');
const brotli = require('brotli');

const originalCode = fs.readFileSync('path/to/your/script.js', 'utf8');
const compressedCode = brotli.compress(originalCode);
const base64Code = compressedCode.toString('base64');

console.log(`<script>${base64Code}</script>`);

위의 예시 코드는 path/to/your/script.js 파일의 자바스크립트 코드를 Brotli 압축하여 Base64 문자열로 변환한 뒤, <script> 태그로 감싸서 출력하는 것을 보여줍니다. 이렇게 압축된 코드는 웹 페이지에 인라인으로 삽입하여 사용할 수 있습니다.

마치며

Brotli 압축을 사용하여 자바스크립트 인라인 코드를 최적화하는 것은 웹 페이지의 성능을 향상시키는 중요한 방법 중 하나입니다. 압축된 코드의 크기가 작아지면 페이지 로딩 시간이 단축되고, 사용자 경험도 개선됩니다. 지금부터는 Brotli 압축을 적용하여 웹 애플리케이션의 성능을 향상시키는 것을 고려해보시기 바랍니다.

#webdevelopment #performance