[javascript] Webpack으로 트리 쉐이킹 적용하기
트리 쉐이킹은 웹 애플리케이션에서 사용되지 않는 코드를 제거하여 번들 크기를 줄이는 기술입니다. 이를 통해 애플리케이션의 로딩 속도를 개선하고 필요한 코드만을 사용하도록 할 수 있습니다. Webpack은 트리 쉐이킹을 적용하기 위한 다양한 플러그인과 로더를 제공합니다.
Webpack에 Terser 플러그인 설치하기
Webpack으로 트리 쉐이킹을 적용하기 위해 먼저 Terser 플러그인을 설치해야 합니다. Terser는 JavaScript 코드 최적화 도구 중 하나로, 사용되지 않는 코드를 제거하고 압축하는 역할을 합니다.
npm install terser-webpack-plugin --save-dev
Webpack 설정 파일에 Terser 플러그인 추가하기
Webpack 설정 파일에 Terser 플러그인을 추가하여 트리 쉐이킹을 적용할 수 있습니다. 보통 webpack.config.js 파일에 아래와 같이 설정합니다.
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// ...기타 설정...
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};
위 설정을 추가하면 Webpack은 번들링 과정에서 Terser 플러그인을 사용하여 코드를 최적화하고, 트리 쉐이킹을 적용합니다.
트리 쉐이킹 적용 결과 확인하기
트리 쉐이킹이 적용된 결과를 확인하기 위해 Webpack으로 번들링된 애플리케이션을 실행해보세요. 빌드된 파일의 크기가 줄어들었을 것이며, 불필요한 코드가 제거된 것을 확인할 수 있습니다.
마무리
Webpack을 사용하여 트리 쉐이킹을 적용하는 방법에 대해 알아보았습니다. 트리 쉐이킹을 통해 애플리케이션의 번들 크기를 줄이고 성능을 개선할 수 있습니다. 추가적으로 Webpack의 다른 최적화 기능들을 함께 활용하여 더 효과적인 번들링을 구현할 수 있습니다.