NextJS Babel에서 SWC로 이사가기 1

( 이 글은 next@12.1.6, antd@4.20.5 을 기반으로 작성되었습니다. )

 

NextJS가 12 버전으로 올라가면서 가장 큰 변화는 개인적으로 Babel에서 Rust Complier인 SWC가 나온 것이라고 생각한다.

물론 Babel에서 바로 이동하기에는 지원하는 부분이 거의 없었기에 바로 사용하는 것이 불가능했다.

 

하지만 이제 NextJS의 버전이 12.1이 되고 내가 사용하는 모든 부분이 대체가 될 수 있도록 변경되었기 때문에 이번에는 Babel에서 SWC로 변경하는 간단한 방법을 소개하려 한다.

.babelrc를 제거한다.

사실 이것으로 swc가 활성화되는 기본 요건은 완성되었다.

이제 여기에 내가 사용하던 babel의 요소를 swc에서 활성화시켜주겠다.

1. Minification 적용하기

가장 먼저 SWC의 속도를 느낄 수 있는 부분이다.

코드를 축소하고 압축하는 부분으로 본래 가장 속도가 빠르다고 알려진 Terser보다 7배가 빠르다고 NextJS에서 설명한다.

적용하는 것은 위와 마찬가지로 무척 간단하다.

// next.config.js

module.exports = {
  swcMinify: true,
};

2. Styled-Components 적용하기

이제 본격적으로 Babel의 내용이 옮겨지는 요소다.

styled-components를 NextJS와 함께 사용할 때는 babel-plugin-styled-components를 설치하고 ssr을 켜줘야 하는데 이 부분을 무척 간단하게 킬 수 있도록 구현해 두었다.

// next.config.js

module.exports = {
  swcMinify: true,
+  compiler: {
+    // ssr, displayName true가 기본값으로 켜진다.
+    styledComponents: true,
+  },
};

3. Modularize Imports 적용하기

위의 사항 정도만 적용해도 대부분의 사람들은 babel에 큰 문제를 느끼지 않을 것이다.

나는 이 부분에서 import를 모듈화 하는 부분을 추가했다.

import를 모듈화 하는 것의 장점은 Tree Shaking이 된다는 점이다.

예로 lodash를 사용한다고 가정하겠다.

import { remove } from 'lodash';

가장 많이 사용하는 방식은 위와 같은 방식이다.

위의 방식은 사용하기로는 remove 하나를 사용하지만 실제로는 아래와 같다.

import _ from 'lodash';

const remove = _.remove;

나는 분명 remove하나를 사용하기 위해 가지고 온 것인데 전체 모듈을 불러오는 결과를 발생한다.

물론 lodash와 같은 라이브러리는 그 크기가 작기 때문에 큰 문제가 없을지 모르지만, antd나 react-bootstrap과 같은 css 라이브러리의 경우 그 크기가 무척이나 커지는 결과가 발생한다.

 

이때 사용할 수 있는 것이 바로 modularize imports이다.

이제 lodash와 antd를 이용해 사용하는 예시를 통해 간단하게 설명하려 한다.

// next.config.js

module.exports = {
  swcMinify: true,
  compiler: {
    // ssr, displayName true가 기본값으로 켜진다.
    styledComponents: true,
  },
+   experimental: {
+    modularizeImports: {
+      antd: {
+        transform: 'antd/lib/{{member}}',
+      },
+      lodash: {
+        transform: 'lodash/{{member}}',
+      },
+    },
+  },
};

간단하게 내가 수정하고자 하는 라이브러리를 위와 같이 경로를 적고 {{member}}를 통해 가변 값을 설정하면 된다.

 

antd의 경우 antd/lib 폴더 아래에 Button과 같은 컴포넌트가 위치하기에 위와 같이 설정했고, lodash의 경우에는 경로가 달라 다르게 설정했다.

 

이 부분은 사용하는 라이브러리를 파악하여 가변적으로 사용할 수 있으며 그 이외에 regex와 같은 내용을 사용하는 등의 방법은 문서를 참고하길 바란다.

 

이제 위와 같이 변경했을 때 어떻게 변화하는지 설명하고 글을 마무리하겠다.

// before import

import { Button } from 'antd';
import { remove } from 'lodash';

// before real import

import antd from 'antd';
import _ from 'lodash';

const Button = antd.Button;
const remove = _.remove;

// after

import { Button } from 'antd'; // import Button from 'antd/lib/button';
import { remove } from 'lodash'; // import remove from 'lodash/remove';