[nextjs] next.config.js 내부의 swcMinifty 설정

 

이 글은 create-next-app으로 프로젝트를 생성한 후에, next.config.js 내부의 swcMinifty에 대해 적어보도록 하겠다. secMinifty는 코드의 압축 암호화와 관련이 있다고 할 수 있다.  nextjs에서 next.config.js를 통해 custom 설정을 진행한다. 관련된 기초내용은 아래의 글을 참고하자.

 

next.config.js 기초 정리

next.config.js reactStrictMode 정리

 

프로젝트를 시작한 후에 next.config.js 내부의 코드를 보면 아래와 같다.

 

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

 

위의 nextConfig의 설정 중에 swcMinifty에 대해 조금 더 알아보도록 하자. swcMinifty에서 볼 수 있듯, swc 빌드 툴을 사용하는 것을 확인 할 수 있다. 아래에서 좀 더 자세히 알아보자.

 

1. swcMinifty

swcMinifty이란 Terser와 비슷한 역할을 한다고 생각하면 된다. Terser의 역할은 필요없는 공백이나, 주석을 삭제하여 용량을 줄이고, 해당 스크립트를 해석할 수 없도록 암호화 하는 역할을 한다고 할 수 있다. 기본적으로 React나 Next는 기본 설정을 통해 build 파일을 만들면서, Terser의 역할을 할 수 있다. 이러한 역할에 대한 설정을 handling 할 수 있도록 하는 것이 swcMinifty라고 할 수 있다. 이러한 역할에 대한 용어를 Minification이라고 한다. Minification에 대해 조금 더 알아보자.

 

Minification

minification이란 스크립트 파일과 웹 페이지에 대한 코드를 최소화하는 것이다. 이를 통해 웹페이지의 로딩 시간을 줄이고, 속도와 접근성을 향상시키면서 더 나은 사용자 경험(UX)를 이끌어 낼 수 있다.

 

대략적인 예는 아래와 같다.

 

Before Minification

function sample1() {
  return Math.floor(Math.random() * 6) + 2;  
}

function sample2() {
  return new Promise(function(fulfill, reject) {
    var number = Math.floor(Math.random() * 6) + 2;
    if (number === 6) {
      fulfill(number);
    } else {
      reject(number);
    }
  });
}

 

위의 코드를 minification 하면, 아래와 같다.

 

After Minification

function sample1(){return Math.floor(6*Math.random())+2}function sample2(){return new Promise(function(a,b){var c=Math.floor(6*Math.random())+2;6===c?a(c):b(c)})}

 

 

2. Nextjs Minification

다시 Nextjs로 돌아와서 Minification관련 설정 예시를 보면 아래와 같다.

// next.config.js

module.exports = {
  swcMinify: true,
}

 

이 설정은 minification을 위해서 next.js 컴파일러를 사용하는 설정이다. 이는 위에서 설명했던 Terser보단 7배나 빠르다. 빌드 툴에 대한 부분은 babel이나 SWC를 포함하여 다음 블로그에서 다뤄보도록 하겠다.

 

3. Nextjs debug options

아래의 내용은 위의 minification에 대한 추가 옵션이다. 참고정도만 하고, 자세히 알고 싶다면 여기를 눌러서 참고하도록 하자.

 

// next.config.js

module.exports = {
  experimental: {
    swcMinifyDebugOptions: {
      compress: {
        defaults: true,
        side_effects: false,
      },
    },
  },
  swcMinify: true,
}