이전 글에서 HTTP 압축과 알고리즘에 대해 다루었다. 이번 글에서는 vite-plugin-compression2를 사용하는 방법에 대해 설명하겠다. 설명하는 라이브러리 버전은 1.2.0이다. 라이브러리에서 제공하는 가이드를 번역했다.

vite-plugin-compression2 사용 방법

vite-plugin-compression2는 번들 에셋을 압축하는 Vite 플러그인이다.

설치하기

npm i -D vite-plugin-compression2

설정하기

vite-plugin-compression2을 사용하려면 vite.config.ts에서 플러그인으로 등록해야 한다.

// vite.config.ts
import { defineConfig } from 'vite'
import { compression } from "vite-plugin-compression2";

export default defineConfig({
	plugins: [
		// 플러그인
    compression(),
  ],
});

아무 인자도 전달하지 않으면 기본 알고리즘(Gzip)이 적용된다.

옵션

vite-plugin-compression2는 html, xml, css, json, js, mjs, svg, yaml, yml, toml 확장자의 에셋 압축을 지원한다.

여러 개의 압축 알고리즘을 제공하는 방법

// vite.config.ts
import { defineComponent } from 'vite'
import { compression } from 'vite-plugin-compression2'

export default defineComponent({
  plugins: [
    // 플러그인
    compression(), // 기본값 gzip
    compression({ algorithm: 'brotliCompress', exclude: [/\.(br)$/, /\.(gz)$/] }),
  ]
})

여러 개의 압축 알고리즘을 제공하는 경우, exclude를 설정하여 중복 압축을 방지해야 한다. 압축 청크는 공유되기 때문에 exclude를 설정하여 이미 압축된 청크를 무시해야 한다.

vite-plugin-compression2은 네 가지 알고리즘을 제공하며, 대표적으로 gzip, brotli을 적용할 수 있다. 가장 일반적인 압축 알고리즘은 gzip, brotli이다. brotli가 gzip에 비해 약 15~20% 더 나은 압축 성능을 보인다. 하지만 brotli는 Internet Explorer에서는 지원되지 않기 때문에 gzip을 기본으로 적용하였다.

적용 결과

설정이 완료되었으니 결과를 살펴보자.

1. 번들 파일 비교

du -sh /dist/assets/index.js

du(disk usage) 명령어를 사용하여 dist 폴더의 파일 크기를 확인할 수 있다. 다음과 같은 결과가 나타난다.

• .js 624K
• .gz 220K
• .br 188K
  압축된 파일 크기는 js, gz, br 순으로 크기가 작아지는 것을 볼 수 있다.

2. 빌드 결과

npm run build 명령을 통해 확인한 결과는 다음과 같다.

• gzip 적용(기본값) : 636.77kB → 222.09kB (약 65% 감소) / 5.43초
  
• brotli 적용 : 646.77kB → 189.88kB (약 70% 감소) / 7.08초
  
• gzip, brotli 둘 다 적용 : br, gzip 사이즈 동일 / 7.05초
  
  

정리

압축 플러그인을 사용한 결과 빌드 시간은 늘었지만 사용자가 다운로드하는 에셋의 용량은 대략 1/3로 줄어들었다. 이러한 결과는 압축을 적용하는 것이 유의미하다고 볼 수 있다. 다만, 빌드 시간을 단축할 수 있는 방법을 모색할 필요가 있다.

레퍼런스
npm/vite-plugin-compression2