[React][TypeScript] Build 최적화하기 (Terser, react-app-rewired)

자바스크립트에서 console.log 메시지를 제거하는 가장 간단한 방법은 웹팩(Webpack) 또는 다른 빌드 도구를 사용하여 프로덕션 빌드를 최적화하는 것이다. 하지만 React의 기본 환경인 Create React App(CRA)은 이러한 레벨의 세부 조정을 허용하지 않는다.

 

따라서 다른 빌드 툴을 사용해야하는데

빌드툴에서는 Babel, Terser 등... 여러가지가 있지만 나는 Terser를 해보려고 한다.

 

 

근데 Terser라는 라이브러리를 통해 console.log를 제거하는 것이 가능하다.

Terser란 무엇일까? 공식 깃헙에서는 아래와 같이 설명하고 있다.

A JavaScript mangler/compressor toolkit for ES6+.

여기에서 mangler, compressor이란 무엇일까?

magle이라는 영어 뜻은 토막토막 베다, 난도질하다, 망쳐버리다... 라는 뜻인데, 이것을 보아하니 우리가 작성한 코드를 망쳐버리는 툴임을 알 수 있었다.

사실 단어 뜻만 가지고는 모르겠는데..그럼 어떤 역할을 하는걸까?

---

mangler는 변수, 함수, 속성들의 이름을 단순화된 이름으로 변경 해주는 것을 의미한다.
즉, 우리가 어떻게 변수명, 함수명을 지었는지와는 무관하게 소스코드에 존재하는 네이밍들을 의미 없는 문자로 바꿔버리게 된다.

예를 들어서) isShowModal이라는 변수명을 ,a로 바꿔버리면 11글자를 한 글자로 줄일 수 있는데, 이러한 최적화 과정을 통해 실제 프로덕션 환경에서 사용될 코드 사이즈를 획기적으로 줄일 수 있다. 

 

그럼 어떻게 사용할까? 예시 코드로 first.js 파일을 Terser의 mangler를 통해 최적화한 결과인 first-mangled.js 파일이 새로 생성되게 되는데 실제로 first-mangled.js 파일을 보면, 우리가 first.js코드에서 사용했던 변수명, 함수명의 네이밍이 n, t, e와 같은 의미 없는 문자로 변환 것을 확인할 수 있었다. 

terser --mangle --toplevel first.js -o first-mangled.js

 

---

그럼 다음으로 Compressor은 무엇일까?

Compressor은 압축하다라는 뜻을 가지고 있는데, 이것을 통해 우리의 코드를 압축해 주는 툴 임을 유추해 볼 수 있었다.

위에서 한 것 처럼 first.js를 Compressor로 압축해보자

terser --compress --toplevel first.js -o first-compressed.js

이 부분을 하게 되면 mangler 기능을 사용하지 않았기 때문에, 우리가 정해준 변수의 이름들은 그대로 유지되었지만, 문법 구조상 변경된 것을 확인할 수 있다.
예를 들어서)

- if 조건문이 && 연산자 혹은 || 연사자로 변경

- Text에 내용을 채워 넣는 코드들이 쉼표를 통해 한 줄의 코드로 변경

- 사용되지 않는 함수들 제거 및 return값 제거

 

이렇게 Terser를 사용하게 되었을 때 30~40%정도 경량화 되는 것을 확인할 수 있었는데, 어떤 옵션값들을 사용하는지에 따라서 코드가 변경되기 때문에 build하고 확인하는 것은 꼭 확인하자..

 

 

 

그럼 이제는 react-app-rewired 라이브러리를 사용하여 직접 웹팩 설정을 조정하는 것을 해보려고 한다.

https://github.com/terser/terser

1. 먼저 필요한 라이브러리를 설치해보자

npm install --save-dev react-app-rewired terser-webpack-plugin

2. 프로젝트의 루트에 config-overrides.js라는 파일을 만들고, 이 파일에서 웹팩 설정을 수정한다

const TerserPlugin = require('terser-webpack-plugin');

module.exports = function override(config, env) {
    // production 환경에서만 console.log 제거
    if (env === 'production') {
        config.optimization.minimizer = [
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        drop_console: true, // console.log 제거
                    },
                },
            }),
        ];
    }

    return config;
};

3. package.json에서 scripts 부분을 react-scripts 대신 react-app-rewired를 사용하도록 수정한다

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

 

그리고 빌드를 하고 console.log()처리를 한 부분들이 잘 실행되는지 확인해보자

console.log()가 나오지 않는 것을 확인할 수 있다.