[javascript] Webpack에서 Tree Shaking 설정하기

29 Nov 2023

javascript

1. Tree Shaking이란

Tree Shaking은 프론트엔드 프레임워크에서 사용되는 최적화 기법 중 하나입니다. 불필요한 코드를 제거하여 번들 크기를 줄이고 성능을 향상시킬 수 있습니다. 주로 ES6 모듈 시스템을 사용하고 있는 프로젝트에서 사용됩니다.

Tree Shaking은 사용하지 않는 코드를 찾아서 제거해주는 역할을 합니다. 이는 모든 코드를 번들링하는 것이 아닌 실제로 사용되는 코드만 번들링하여 최적화된 번들을 생성합니다.

2. Webpack에서 Tree Shaking 설정하기

Webpack을 사용하여 Tree Shaking을 설정하기 위해서는 몇 가지 단계를 따라야 합니다.

단계 1: package.json 파일에서 “sideEffects” 설정하기

// package.json

{
  "name": "my-app",
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

Webpack에게 어떤 파일이 순수한 ES6 코드인지 알려주기 위해 sideEffects 속성을 설정해야 합니다. sideEffects 배열에는 순수하지 않은 파일 목록을 작성합니다. 일반적으로 css, scss와 같은 파일들은 순수하지 않은 파일이기 때문에 여기에 포함시켜야 합니다.

단계 2: Webpack 설정 파일에 mode 설정하기

Webpack 설정 파일에 mode 속성을 production으로 설정하여 최적화 모드로 설정해야 합니다.

// webpack.config.js

module.exports = {
  mode: 'production',
  // ... other configuration options
}

단계 3: Webpack 설정 파일에 optimization 설정하기

Webpack 설정 파일에서 optimization 객체를 생성하고 usedExports 속성을 true로 설정해야 합니다.

// webpack.config.js

module.exports = {
  // ... other configuration options
  optimization: {
    usedExports: true
  }
}

단계 4: Webpack 빌드하기

위의 단계들을 완료한 후에 Webpack을 실행하여 빌드해야 합니다.

$ webpack

3. 결론

Webpack에서 Tree Shaking을 설정하여 사용하지 않는 코드를 제거하고 번들 크기를 줄일 수 있습니다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다. Tree Shaking은 프론트엔드 개발에 있어서 매우 유용한 최적화 기법 중 하나입니다.

목차