React 프로젝트에서 GZIP 압축 사용하기

React는 현대 웹 애플리케이션 개발에 널리 사용되는 자바스크립트 라이브러리입니다. 웹 애플리케이션의 성능을 최적화하는 방법 중 하나는 리소스 파일의 크기를 줄이는 것입니다. 이 포스트에서는 React 프로젝트에서 GZIP 압축을 사용하여 성능을 향상시키는 방법에 대해 설명하겠습니다.

 

왜 GZIP 압축을 사용해야 하는가?

 

웹 애플리케이션에서 성능 최적화를 위해 GZIP 압축을 사용하면 다음과 같은 이점이 있습니다.

 

1. 속도 향상: 파일 크기가 줄어들면 웹 브라우저가 빠르게 리소스를 다운로드할 수 있으며, 이로 인해 페이지 로딩 시간이 단축됩니다.
2. 대역폭 절약: 압축된 파일을 전송함으로써 네트워크 대역폭을 절약할 수 있습니다. 이는 특히 모바일 환경에서 중요한 요소입니다.

 

React 프로젝트에서 GZIP 압축 적용하기

 

React 프로젝트에서 GZIP 압축을 사용하려면 웹 서버가 해당 기능을 지원해야 합니다. 웹 서버는 클라이언트(브라우저)로부터 요청을 받았을 때, GZIP 압축된 파일을 전송하도록 설정해야 합니다. 이 작업은 주로 웹 서버 설정을 통해 이루어집니다.

 

웹 서버별 GZIP 압축 설정 예시

 

Apache

Apache 웹 서버에서 GZIP 압축을 활성화하려면 .htaccess 파일에 다음 설정을 추가하세요.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/json
</IfModule>

 

Nginx

Nginx 웹 서버에서 GZIP 압축을 활성화하려면 nginx.conf 파일에 다음 설정을 추가하세요.

gzip on;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/json;

JAVA SPRING BOOT

application.properties

spring.resources.chain.gzipped=true

webconfg.java

import org.springframework.web.servlet.resource.GzipResourceResolver;

@Configuration
public class WebConfig implements WebMvcConfigurer {


    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
        registry.addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/static/")
								.resourceChain(false) //추가하는 부분
								.addResolver(new GzipResourceResolver()); //추가하는 부분

        registry.addResourceHandler("/built/**")
                .addResourceLocations("classpath:/static/built/")
								.resourceChain(false)
								.addResolver(new GzipResourceResolver());

    }
}

addResourceHandler 에 추가한 내용

.resourceChain(false).addResolver(new GzipResourceResolver());

 

반응형

React 빌드 파일 압축

 

React 프로젝트를 빌드하면, 기본적으로 압축되지 않은 파일이 생성됩니다.

따라서 웹 서버에서 압축된 파일을 제공하려면 빌드된 파일을 GZIP 압축해야 합니다.

빌드 파일을 압축하려면, gzip 명령어를 사용하거나 파일 압축 도구 (예: 7-Zip, WinRAR 등)를 사용하여 수동으로 압축할 수 있습니다. 또한, 빌드 과정에 GZIP 압축을 자동으로 포함시키려면, 웹팩(Webpack)과 같은 모듈 번들러를 사용하고 compression-webpack-plugin 플러그인을 적용할 수 있습니다.

 

웹팩을 사용한 GZIP 압축 설정

https://www.npmjs.com/package/compression-webpack-plugin

compression-webpack-plugin

1. compression-webpack-plugin을 설치합니다.

npm install compression-webpack-plugin --save-dev

2. 웹팩 설정 파일(webpack.config.js)에 다음 코드를 추가하여 compression-webpack-plugin을 설정합니다.

const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  // 기존 웹팩 설정
  plugins: [
    // 기존 플러그인 설정
    new CompressionWebpackPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html)$/,
      threshold: 10240, // 압축을 적용할 파일 크기의 최소값 (10KB)
      minRatio: 0.8, // 압축률이 80% 이상일 경우에만 압축을 적용
    }),
  ],
};

위의 설정은 웹팩 빌드 과정에서 자동으로 GZIP 압축을 적용하도록 합니다.

압축이 적용된 파일은 웹 서버가 요청에 따라 전송됩니다.

결론

React 프로젝트에서 GZIP 압축을 사용하면 성능 향상과 대역폭 절약을 동시에 이룰 수 있습니다. 

웹 서버와 웹팩 설정을 통해 GZIP 압축을 적용하면 웹 애플리케이션의 로딩 속도를 높일 수 있으므로, 전반적인 사용자 경험을 향상시킬 수 있습니다.

 

next.js를 사용하면 next.js에서 제공하는 옵션을 통해서 gzip압축이 가능합니다.

https://nextjs.org/docs/api-reference/next.config.js/compression

next.config.js: Compression | Next.js