logo

JEONGGON

    블로그
github
mode
목 차
down-arrow

Webpack gzip

2024.03.20.

post-thumbnail

gzip 압축

1. gzip 압축

  • 앞서 development server 설정에서 compress: true는 제공되는 모든 항목에 대해 gzip 압축을 활성화하는 설정이라고 언급 됨
  • 압축은 대역폭 절약사이트 속도 향상을 위한 간단하며 효과적인 방법
  • 과거에는 구형 브라우저 문제로 JavaScript 속도 향상을 위해 gzip 압축을 사용하는 것이 어려웠음
  • 하지만 최근 신형 브라우저들의 높은 점유율로 gzip 압축이 많이 이용됨

1-1. gzip 압축 없이 브라우저에서 데이터를 보여주기

  • 클라이언트에서 요청을 보내면 해당 경로에 있는 데이터를 서버에서 찾고, 찾은 데이터를 클라이언트로 응답코드와 함께 보냄
  • 이 경우, 찾은 데이터를 그대로 보내기용량이 크고 응답 받는데 상대적으로 많은 시간이 소요됨

1-2. gzip 압축을 통해 브라우저에서 데이터 보여주기

  • gzip 압축이 없을 경우, HTML은 많은 텍스트가 중복됨
  • 특히, HTML의 <html>, <div> 등 많은 태그는 닫는 태그를 필요로 하기에 용량이 커짐
  • 이러한 문제를 해결하기 위해 gzip 압축이 필요함
  • 클라이언트에서 요청을 보내면 서버에서 압축된 버전의 데이터가 있다면 해당 데이터를 응답으로 보냄
  • 이전의 index.html 대신 index.html.zip의 압축 버전을 보냄으로써 대역폭과 다운로드 시간을 절약할 수 있음
webpackbundlegzip
profile

조정곤

주니어 프론트엔드 개발자

github
linkedin
instagram
email

< 이전글

Webpack config

다음글 >

Webpack 개발 서버

Webpack 포스트 (13)

down-arrow
Webpack 소개Webpack importWebpack 폴더 및 파일 구조Webpack Babel LoaderWebpack DevtoolWebpack LoaderWebpack PluginWebpack configWebpack gzipWebpack 개발 서버Webpack 캐싱Webpack Bundle AnalyzerWebpack Resource Asset