[UNI-312] feat : 정적 파일 Gzip, Brotli 압축을 통한 웹페이지 다운로드 속도 개선

[jpark0506]

📝 PR 타입

• 기능 구현
• 기능 수정
• 버그 수정
• 리팩토링
• 인프라, 의존성, 환경 변수, 빌드 관련 코드 업데이트

🚀 변경 사항

Gzip, Brotli 압축으로 더 빠르게 서빙할 수 있도록 nginx 설정 적용

    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml+rss image/svg+xml;

    brotli on;
    brotli_static on;
    brotli_comp_level 11;
    brotli_types text/plain text/css application/json application/javascript text/xml application/xml+rss image/svg+xml;

vite-compression-plugin 사용해 gzip 및 br 파일 생성

//vite.config.ts
export default defineConfig({
	plugins: [
		react(),
		tailwindcss(),
		svgr(),
		compression({
			algorithm: "brotliCompress",
			ext: ".br",
			threshold: 1024,
			deleteOriginFile: false,
		}),
		compression({
			algorithm: "gzip",
			ext: ".gz",
		}),
	],
});

1024byte(1KB) 미만의 파일들은 brotli 압축하지 않습니다.

💡 To Reviewer

감사합니다.

🧪 테스트 결과

LightHouse 점수 측정

적용 전

랜딩 페이지 (FCP 1.4s, 71점)

지도 메인 페이지 (FCP 3.0s)

적용 후

랜딩 페이지(FCP 1.4s, 74점->91점)

지도 메인 페이지(FCP 1.4s)

다운로드한 자원 측정

적용 전 (751kb)

적용 후 (390kb, 48% 감소)

✅ 반영 브랜치

fe

[dgfh0450]

LGTM! 인프라에 대해 더 배워가는 것 같습니다. 저런 파일들을 압축해서 제공하는 것이 신기합니다....

[dgfh0450]

LGTM!