Javascript/Node.js

[ Node.js ] - compression으로 데이터 압축하기

algml0703 2022. 8. 14. 00:12
반응형

Compression

많은 양의 데이터가 네트워크 전송시 네트워크에 부담을 줄 수 있는데, compression은 서버에서 데이터를 압축하여 준다. 이를 통해 서버는 클라이언트로  데이터를 전송할 때, 압축된 데이터를 보냄으로써 네트워크 전송 속도를 높이고, 비용을 줄일 수 있다.

 

사용법

> npm i --save compression

compression을 이용하여 데이터 압축하기 전 

import express from "express";

const app = express();

app.get("/", (req, res) => {
  const payload =
    "dkssdjssdjfkalsjfklasjklfjlkakssdjfkalsjfklasjklfjlkasjfsjfkalsjfklasjklfjlkakssdjfkalsjfklasjklfjlkasjfsjf";
  res.send(payload.repeat(10000));
});

app.listen(3000, () => {
  console.log("server start 3000");
});

compression을 사용하기 이전에 관리자 도구에서 데이터의 정보를 확인해보면, 데이터의 크기는 440kb이며, 시간은 24ms가 걸렸다.

compression을 사용한 경우

import express from "express";
import compression from "compression";

const app = express();

app.use(compression());

app.get("/", (req, res) => {
  const payload =
    "dkssdjssdjfkalsjfklasjklfjlkakssdjfkalsjfklasjklfjlkasjfsjfkalsjfklasjklfjlkakssdjfkalsjfklasjklfjlkasjfsjf";
  res.send(payload.repeat(10000));
});

app.listen(3000, () => {
  console.log("server start 3000");
});

compression을 사용하여 데이터가 압축된 경우에는 데이터의 크기는 1.8KB로, 시간은 12ms로 줄어든 것을 확인할 수 있다. 

그리고 또 한가지 특이한 것은, Content-Encoding이 gzip으로 되어있는 것을 확인할 수 있다.

옵션

  • level : 압축 정도를 설정하는 것으로 -1에서 9까지 가능하다. 1이 기본 압축을 의미하며, -1은 압축을 하지 않는 것이며, nodejs 환경에서는 6으로 설정하는 것이 가장 최적화하는 수준이다.
  • threshold: 압축하지 않는 최소한의 크기를 설정하는 것이다. 예를 들어 threshold : 100 * 1000은 100kb아래의 데이터는 압축하지 않고, 클라이언트에게 전송한다.
  • filter: 특정 조건에 따라 압축을 할지 말지를 결정하는 것이다.

옵션 적용한 경우 코드

import express from "express";
import compression from "compression";

const app = express();

app.use(
  compression({
    level: 6,
    threshold: 100 * 1000,
    filter: (req, res) => {
      if (req.headers["x-no-compression"]) {
        // header에 x-no-compression이 있으면, 압축하지 않도록 false를 반환한다.
        return false;
      }
      return compression.filter(req, res);
      // 없는 경우에는 압축허용
    },
  })
);

app.get("/", (req, res) => {
  const payload = "dkssdjssdjfkalsjfklasjklfjlkakssdjfkalsjfklasajk";
  res.send(payload.repeat(10000));
});

app.listen(3000, () => {
  console.log("server start 3000");
});

 

출처 

https://www.youtube.com/watch?v=jZ6x5Ab7Bgc 

 

반응형