들어가며

리소스를 압축하면 사용자에게 더 적은 비용으로 리소스를 제공할 수 있다. 이번 게시글에서는 리소스를 압축해서 브라우저에게 전달하는 방법에 대해 정리하려 한다.

브라우저는 압축된 파일을 해제할 수 있는가?

All modern browsers can handle a gzip encoded response.

위는 관련된 스택오버플로우 글에서 발췌한 내용이다. 모던 브라우저는 gzip으로 압축된 파일을 인코딩할 수 있다고 한다. 실제로 리소스의 인코딩과 관련해서 요청 측에서 사용하는 Header 속성인 Accept-Encoding의 브라우저 호환성을 확인하면 브라우저의 대부분의 버전에서 지원하는 것을 확인할 수 있다. 이를 통해 브라우저에서 리소스의 압축을 해제하는 기능은 대부분의 브라우저에서 이용할 수 있다고 추측할 수 있다.

Accept-Encoding 속성 지원 현황

추가로 응답받은 리소스의 압축 여부는 응답 헤더의 Content-Encoding 속성을 통해 확인 할 수 있다.

파일 압축하기

대표적으로 리소스 파일을 압축할 때 아래의 두 가지 방법을 이용한다.

webpack 플러그인을 통해 빌드할 때 압축 진행
nginx에서 리소스 압축 진행 with gzip

1. webpack 플러그인을 통해 빌드할 때 압축 진행

CompressionWebpackPlugin을 통해 빌드 시 압축을 진행할 수 있다. 압축을 기본적으로 gzip 방식으로 진행한다. 압축 방식을 변경하고 싶다면 algorithm 옵션을 사용하면 된다.

2. nginx에서 리소스 압축 진행 with gzip

nginx에서 gzip 압축 옵션은 다음과 같다.

gzip 옵션

gzip [on/orr]: gzip의 설정을 on/off하는 명령어입니다.
gzip_disable [regex]: 해당 명령어 다음에 오는 문장이 요청 헤더에 User-Agent와 일치하면 gzip을 하지 않습니다.
gzip_vary [on/off]: gzip, gzip_static, or gunzip의 설정들이 on으로 되어있을 때 응답 헤더에 “Vary: Accept-Encoding”를 넣을지 말지에 대한 명령어 입니다.
gzip_proxied: 요청과 응답에 따라서 프록시된 요청에 대해서 gzipping을 할지 말지에 대한 설정입니다. “any”로 설정하면 모든 응답에 대해서 gzipping을 수행합니다.
gzip_comp_level [level]: 응답에 대한 압축의 정도를 의미하며 level의 값은 1부터 9까지 가능합니다.
gzip_buffers [num] [size]: num은 버퍼의 갯수를 의미하며 size는 그 버퍼의 크기를 의미합니다.
gzip_http_version [versino]: minimum HTTP 통신의 버전을 정합니다.
gzip_types [types in array]: “text/html”을 제외하고 MIME 타입에서 또 어떠한 응답 형태들을 gzipping 할지 정할 수 있습니다.

gzip 옵션 설정은 nginx의 기본 설정파일에서 할 수 있다. 파일의 경로 예시는 다음과 같다.

/etc/nginx/nginx.conf

해당 파일에서 gzip 옵션을 적용한 예시는 아래와 같다.

{
	...
	gzip on;
	gzip_disable 'msie6';
	gzip_vary: on;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+res text/javascript;
}