NextJS - SWC 적용하기

Nextjs가 12버전이 나오면서 babel이 아닌 SWC 컴파일러를 도입했다.

Next.js에서 Babel의 한계

Babel을 사용하면 개발자는 최신 버전의 JavaScript로 작성하여도 이전 웹 브라우저와 여전히 호환이 됬지만 Babel에는 고유한 문제점이 있다.

• Babel은 코드를 변환할 때 코드 구문을 변경합니다. 따라서 개발자가 변경된 코드를 이해하기 어려울 수 있습니다.
• 코드의 크기가 원래 코드에 비해 증가합니다.
• polyfill을 사용해 일부 지원해주지 않는 부분을 설정해줘야 합니다.
• Babel이 코드를 컴파일하는데 걸리는 시간은 다른 컴파일러보다 훨씬 큽니다.

이러한 제한 사항은 개발 시간을 크게 증가시키며 생산성을 저하시킬 수 있습니다.
그렇다면 Rust기반 컴파일러를 이용하면 더 좋지 않을까요?

SWC(Speedy Web Compiler)

그래서 Next.js는 12버전부터 SWC가 도입되었습니다. Rust로 작성되어 Babel보다 빠르며 효율적입니다.
Rust는 JavaScript보다 빠르게 컴파일하고 실행할 수 있는 이점을 가지고 있습니다. 이를 통해 축소, 번들링, 컴파일 등과 같은 여러 기능을 수행 할 수 있습니다.
SWC를 사용할 때 얻는 이점은 무엇이 있을까요?

SWC의 장점

• 확장성: Next.js의 12버전에는 SWC 컴파일러가 사전 구축되어 있어 사용하기 쉽습니다.
• WebAssembly: Rust의 WASM 지원으로 어떤 종류의 플랫폼에서도 Next.js를 이용하여 개발할 수 있습니다.
• 성능: SWC는 Babel과 같은 다른 컴파일러보다 훨씬 뛰어난 성능을 제공합니다.
• 커뮤니티: Rust및 SWC 커뮤니티는 계속 성장하고 있으며 쉽게 정보를 찾을 수 있습니다.

이점을 살펴봤으니 이제 Next.js에서 SWC를 사용해 보겠습니다.

Next.js에서 SWC 구성

Minification 적용하기

만약 Babel에서 SWC로 전환한다면 가장 먼저 SWC의 속도를 느낄 수 있는 부분입니다.
코드를 축소하고 압축하는 부분은 본래 가장 속도가 빠르다고 알려진 Terser보다 7배 빠르다고 Next.Js에서 설명해 줍니다.
적용하는 것은 무척 간단합니다.

// next.config.js

module.exports = {
  swcMinify: true,
};

console 호출 제거하기

애플리케이션 코드에서 모든 console 호출을 제거하도록 SWC를 구성할 수 있습니다.

// next.config.js

module.exports = {
  swcMinify: true,
  compiler: {
    removeConsole: true,
  },
};

그러나 console의 특정 호출은 포함시키기 위해서는 아래 코드를 추가해야합니다.

module.exports = {
  swcMinify: true,
  compiler: {
    removeConsole: {
      exclude: ['error']
    }
  },
};

위 코드는 console.error로 작성되었다면 호출이 되도록 설정해 둔 코드입니다.

Styled-Components 적용하기

Styled-components를 Babel에서 사용할 때는 babel-plugin-styled-components를 설치하고 SSR을 켜줘야 했었짐나, SWC는 무척 간단하게 설정할 수 있습니다.

// next.config.js

module.exports = {
  swcMinify: true,
  compiler: {
    styledComponents: true,
  },
};

Modularize Imports 적용하기

import를 모듈화 하는 것의 장점은 Tree Shaking이 된다는 점이다.
예를 들어 lodash를 사용한다면

import { remove } from 'lodash';

위와 같은 방식을 통해 remove를 불러온다.
그러나 위의 방식으로 사용하면 remove 하나를 사용하기 위해 전체 모듈을 불러오는 결과가 발생한다.

import _ from 'lodash';

const remove = _.remove;

물론 lodash는 크기가 작기에 별 문제가 없을 것이다. 그러나 크기가 근 react-bootstrap과 같은 라이브러리의 경우 문제가 발생할 수도 있다.
이때 사용할 수 있는 것이 바로 modularize imports이다.

// next.config.js

module.exports = {
  swcMinify: true,
  experimental: {
    modularizelmports: {
	  lodash: {
        transform: 'lodash/{{member}}',
      },
    },
  },
}

위의 코드처럼 사용할 수 있는데 간단하게 내가 수정하고자 하는 라이브러리를 {{member}}을 통해 가변 값을 설정하면 된다.
이 외에 regex도 사용할 수 있다.
이제 위와 같이 설정하면 이렇게 변화한다.

// before import
import { remove } from 'lodash';

# before real import
import _ from 'lodash';

const remove = _.remove;

# after
import { remove } from 'lodash';