나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 최적화 작업

• Webpack 4버전 이상을 사용하는 경우에는 ES6 모듈을 대상으로 기본적인 트리쉐이킹을 제공한다.(import, export를 사용하는 모듈)
• Create React App을 통해 만든 React 애플리케이션도 Webpack을 사용하고 있기 때문에 트리쉐이킹이 가능하다.

// Import all the array utilities!
import arrayUtils from 'array-utils'

// import 문을 사용하여 ES6 모듈의 특정 부분만을 가져오는 방법을 사용
// Import only some of the utilities!
import { unique, implode, explode } from 'array-utils'

Tree Shaking 설정

webpack 공식 문서를 확인해보면 tree shaking 설정을 위해 해 줘야 되는 행동은 4가지가 있습니다.

• ES6 모듈 포맷 사용 (ex, import / export)
• commonjs로 컴파일되는 것 방지하기 (@babel/preset-env 설정 등을 이용)
• package.json에 sideEffects 속성 사용
• webpack production mode 사용

React Tree Shaking

내보낼 모듈에 대해서는 export 하기

• 내보낼 모듈에 대해서는 각각 export 하고 필요로한 컴포넌트에 import 할 경우 tree shaking이 가능합니다.
  • 그렇다면 궁금한 점?? 와디즈 서비스에 보면 re-export 구문으로 설정되어 있는 경우에도 tree shaking이 가능할까?
  • 결론은 됩니다. 그 이유는?? webpack 4 이후부터는 production 빌드 시 optimization 설정 중 providedExports 기본값이 true로 설정됨에 따라서 webpack 빌드 시 구문을 분석해서 최적화 처리를 해줍니다.

// TreeShaking
export { default as Test1 } from './Test1';
export { default as Test2 } from './Test2';

// App.tsx
import * as TreeShaking from './TreeShaking';
import { Test1 } from './TreeShaking';
// Test1만 사용할 경우라도 tree shaking 처리해줌.

function App() {
  return (
    <div>
      {/* <TreeShaking.Test1></TreeShaking.Test1> */}
      <Test1></Test1>
    </div>
  );
}

Babelrc 파일 설정하기

Babel은 JavaScript 문법을 구 버전 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환해주는 라이브러리로써, 웹 어플리케이션에 꼭 필요한 필수 도구입니다. 단, 트랜스파일링 진행 시 사용되는 babel-preset-env 패키지 사용 시 es6 문법을 자동으로 commonjs 변환해서 트리쉐이킹 처리를 불가능하게 됩니다.

이를 방지하기 위해서 .babelrc에서 commonjs로 변환하지 못하도록 설정을 추가해 줘야 합니다.

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ]
}

// modules 값을 false로 설정하면 ES5 문법으로 변환하는 것을 막고,
// 반대로 true로 설정하면 항상 ES5 문법으로 변환한다.