[javascript] 압축과 minification을 통한 코드 최적화

08 Dec 2023

javascript

웹 개발에서 코드 최적화는 성능을 향상시키고 사용자 경험을 개선하는 데 중요합니다. 압축과 minification은 코드를 최적화하는 데 널리 사용되는 기술입니다.

1. 압축 (Compression)

웹 사이트의 성능을 향상시키기 위해, 파일 크기를 줄이는 것이 중요합니다. 이는 압축을 통해 달성됩니다. 웹 서버는 GZIP 또는 Brotli와 같은 압축 알고리즘을 사용하여 HTML, CSS, JavaScript 및 기타 웹 자원을 압축할 수 있습니다. 클라이언트 브라우저는 이러한 압축된 자원을 해제하여 다운로드하고 처리합니다. 이를 통해 네트워크 대역폭을 절약하고 웹 페이지 로딩 시간을 단축할 수 있습니다.

// GZIP 압축 설정 예시 (Apache)
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
</IfModule>

2. Minification

Minification은 코드를 줄이고 읽기 쉽지 않은 형태로 변환하여 공백, 주석 및 기타 불필요한 문자를 제거하는 프로세스입니다. 이 과정을 거친 코드는 여전히 동일한 기능을 수행하지만 파일 크기가 크게 줄어듭니다.

예를 들어, 다음의 JavaScript 코드:

function addNumbers(a, b) {
  return a + b;
}

다음과 같이 minified될 수 있습니다:

function addNumbers(a,b){return a+b;}

이런 작은 변경으로도 파일 크기를 줄일 수 있습니다.

요약

압축과 minification은 웹 페이지의 성능을 향상시키기 위해 반드시 고려해야 하는 기술입니다. 압축을 통해 네트워크 대역폭을 절약하고, minification을 통해 파일 크기를 줄여 로딩 시간을 단축할 수 있습니다. 이러한 기술들은 웹 사이트의 성능을 최적화하는 데 중요한 역할을 합니다.

참고 문헌:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer
https://developer.mozilla.org/en-US/docs/Glossary/Minification