Tree-Shaking(with sideEffects)

Tree Shaking은 영어 그대로 직역하자면 나무 흔들기 정도가 되겠다. 나무를 흔들게 되면 나뭇잎 혹은 나뭇가지들이 떨어져 나가듯이, 코드를 Tree Shaking 한다는 것은 쓸모없는 코드들을 털어낸다는 것을 의미한다. 즉, webpack에서의 Tree Shaking은 프로젝트를 빌드하는 과정에서 사용되지 않는 코드들을 제외함으로써 전체적인 빌드 파일의 크기를 줄이는 작업이라고 할 수 있다.

Tree Shaking은 기본적으로 ES2015의 import와 export를 활용한 모듈에 적용된다. 즉, CommonJS, AMD 등의 모듈방식에는 적용되지 않는다.

Tree Shaking은 Development모드에서는 실행되지 않는다. 이는 기본적으로 Webpack이 Development모드에서 code 최적화를 진행하지 않기 때문이다.

설정은 간단하다.

webpack.confing.js

테스트 설정

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
+ mode: 'development',
+ optimization: {
+   usedExports: true,
+ },
};

위와같이 설정하면 빌드된 코드가 minify되지 않는다. tree shaking이 의도되로 잘 이루어 졌는지 확인하기 위해 위와같이 설정을 해 줄 수 있다.

실제 production 설정

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
+ mode: 'production',
};

webpack.confing.js

Side Effects