에셋 파일들을 gzip으로 압축하여 전달하기

Vercel, Netlify, AWS CloudFront 등의 CDN을 사용하는 경우 별도의 처리를 하지 않아도 서비스에서 gzip 압축을 지원한다. 하지만 위와 같은 서비스를 사용하지 않는 경우, 웹 서버를 통해 에셋을 gzip으로 압축하거나 gzip 파일을 서빙하도록 설정해야 한다.

레거시 프로젝트에 에셋을 gzip으로 전달하도록 했더니 페이로드가 총 4.3MB -> 1.16MB 로 약 73%로 줄어든 것을 확인할 수 있었다.

Nginx에서 gzip 압축 적용

nginx.config 파일에 다음과 같이 gzip 설정을 추가할 수 있다.

http {
    gzip on; # gzip 활성화
    gzip_types text/plain text/css text/javascript; # 압축할 파일 타입
    gzip_min_length 1024; # 1KB 이상인 파일만 압축
    gzip_comp_level 9; # 압축 수준 (1~9, 높을수록 CPU 사용량 증가)
}

Webpack, Vite에서 gzip 압축 적용

CompressionWebpackPlugin, VitePluginCompression 등의 플러그인을 사용하여 빌드시 에셋 파일들을 gzip으로 압축할 수 있다.

server {
    listen 80;
    server_name blog.minjong.dev
    # ...

    # gzip 파일 서빙 설정
    location ~* \.(js|css|html|svg)$ {
        gzip_static on;
        add_header Cache-Control "public, max-age=31536000";
        add_header Content-Encoding gzip;
    }
}