압축을 도입하게 된 계기
프로젝트 빌드 시 가장 큰 에셋의 크기가 500kB가 넘어가는 문제가 있었다. lazy, Suspense를 도입해 동적 로드와 코드 스플리팅을 적용했지만 여전히 500kB를 초과하는 문제가 있었다. 해결 방법 중 하나로 Vite 압축 플러그인을 찾아보게 되었다. 압축 플러그인 소개에 앞서 HTTP 압축과 알고리즘에 대해 알아보겠다.
HTTP 압축이란?
HTTP 압축은 서버와 브라우저 간의 데이터 전송 속도와 대역폭을 개선하기 위한 기술이다. 서버가 브라우저에게 보낼 응답(Response)를 압축하여 브라우저에게 더 작은 사이즈의 압축 파일을 전달함으로써 네트워크 비용을 줄일 수 있다. 압축에 사용될 일반적인 알고리즘은 Gzip, Brotli(br)이다.
압축 알고리즘을 선택하기 위해서는 브라우저와 서버 간 콘텐츠 협상(Content Negotiation)을 ****사용한다. 클라이언트가 보내는 HTTP 헤더를 사용하는 방법은 다음과 같다.
- 브라우저가 웹 서버로 리소스를 요청할 때 Request Header의 Accept-Encoding에 브라우저가 지원하는 압축 알고리즘과 우선순위를 함께 전달한다.
- 서버에서는 헤더의 압축 알고리즘에 따라 리소스(Response Body)를 압축한다. 이때 사용한 알고리즘은 Content-Encoding 헤더에 담아 브라우저에게 전달한다.
압축 알고리즘의 종류
압축 알고리즘의 종류 중 많이 언급되는 몇 가지를 알아보려고 한다.
- deflate : 특정 파일을 압축하는 무손실 압축 데이터 알고리즘으로 ZIP, gzip 등에 사용된다.
- Gzip : 1992년 공개된 압축 알고리즘으로 무손실 압축 데이터 알고리즘(DEFLATE)를 사용한다. 최대 70%까지 사이즈를 줄여준다. 파일 중복 코드나 띄어쓰기를 줄여준다. 확장자는 .gzip이다. 많은 CPU 리소스를 사용하지만 압축률이 높기 때문에 자주 사용되지 않는 콜드 데이터에 적합하다.
- Brotli : 구글이 2013에 발표한 압축 알고리즘이다. gzip에 비해 최대 15~20% 더 적은 용량으로 압축핟나. 확장자는 .br이다. 참고로 Brotli는 ie에서는 지원하지 않기 때문에 ie에서는 gzip을 사용해야 한다.
- zstd : 페이스북에서 개발한 오픈소스 무손실 데이터 압축 알고리즘이다. gzip과 비슷한 압축률을 제공하지만 압축 해제 속도는 더 빠르다.
- lzo : Lempel-Ziv-Oberhumer(LZO)의 줄임말로 deflate 압축에 비해 압축/해제 해제 속도가 더 빠르다. gzip보다 더 적은 CPU 리소스를 사용한다. 다른 알고리즘에 비해 압축률이 낮다. 빠른 압축/해제 속도로 실시간 데이터에 특화되었다.
JavaScript를 압축하는 일반적인 방법은 Gzip, Brotli이다. 프로젝트에서도 Gzip과 Brotli를 적용했다.
참고/배포 서비스에 따른 압축 형식
배포 서비스에 따라 압축 형식을 지원한다.
- Vercel은 gzip, brotli 압축 형식을 지원한다.
- AWS CloudFront는 Gzip, Brotli 압축 형식을 지원한다. 두 형식이 모두 있는 경우 Brotli를 선호한다.
- Netlify Edge는 Gzip, Brotli 압축 형식을 지원한다.
내가 이용하고 있는 배포 서비스가 지원하는 압축 형식이 무엇인지 알아두면 좋을 것 같다.
vite-plugin-compression2의 기능
이제 내가 사용했던 vite 압축 플러그인 vite-plugin-compression2에 대해 소개해 보겠다.
vite-plugin-compression2은 Vite 환경에서 빌드 시 생성되는 Assets 파일들을 압축하여 파일 크기를 줄여준다. 지원하는 압축 알고리즘은 deflate, Gzip, Brotli 알고리즘이 있다. vite-plugin-compression2는 클라이언트 측에서 에셋을 압축한다. 만약, 클라우드 서버 제공자가 압축을 지원하는 경우 압축 플러그인이 필요하지 않을 수 있다.
vite-plugin-compression과 vite-plugin-compression2의 차이
npm에서 vite-plugin-compression를 검색하면 두 개가 있다. 이 둘 사이에 무슨 차이가 있는지 알아보자.
npm 검색 결과를 살펴보면, vite-plugin-compresion은 다운로드 수가 높지만 업데이트가 3년 전이다. vite-plugin-compression2는 다운로드 수는 적지만 업데이트가 최근(20일 전)이다. 라이브러리 오른쪽 그래프에 있는 pqm 수치는 p(Popularity) q(Quality), m(Maintenance)를 의미한다. 2버전은 기존 버전보다 q, m 수치가 높다.
vite-plugin-compression2 Q&A에 왜 2버전을 사용해야 하는지에 대한 질문이 있었다. 답변은 vite-plugin-compression이 유지보수가 되지 않고 있어서 2 버전을 새로 만들었다고 한다.
팀원의 의견과 pqm 수치를 보고 판단하여 vite-plugin-compression2를 사용하기로 결정했다. vite-plugin-compression2 사용 방법은 따로 정리해두겠다.
정리
웹사이트 성능을 높이는 HTTP 압축에 대해 알게 되었다. HTTP 압축은 전송 속도와 대역폭을 개선하기 위한 기술이다. 압축 알고리즘을 선택하기 위해 콘텐츠 협상(Content Negotiation)을 사용한다. 콘텐츠 협상의 과정은 다음과 같다. 브라우저가 리소스를 요청할 때 Accept-Encoding 헤더에 브라우저가 지원하는 압축 알고리즘의 종류와 우선순위를 전달한다. 서버는 리소스에 적용한 압축 알고리즘을 Content-Encoding 헤더에 담아 브라우저에게 전달한다.
Gzip보다 Brotli 알고리즘을 둘 다 지원한다면 압축률이 더 좋은 Brotli 알고리즘을 사용하자.
npm 검색 시 나오는 pqm 수치에 대해 알게 되었다. 라이브러리를 선택할 때 업데이트 기간과 함께 pqm수치를 살펴보면 좋겠다.
레퍼런스
GitHub/vite-plugin-compression2
mdn/HTTP 압축
mdn/콘텐츠 협상
[압축 방식 비교] gzip vs snappy vs lz4 vs brotli vs zstd vs lzo
