웹팩 번들 분석기: 번들 최적화 전략
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
개발 툴
대상자
Webpack을 사용하는 프론트엔드 개발자 및 번들 최적화를 위한 실무자
난이도: 중급 (Webpack 설정 및 최적화 기술 이해 필요)
핵심 요약
- Webpack Bundle Analyzer 설치 및 설정으로 번들 크기 분석 가능
splitChunks와TerserWebpackPlugin사용으로 번들 크기 최적화- 동적 임포트(
import()) 및 CDN 활용으로 초기 로딩 성능 개선
섹션별 세부 요약
1. 설치 및 기본 설정
webpack-bundle-analyzer설치 및webpack.config.js에BundleAnalyzerPlugin추가report.html생성 후 번들 크기 분석 가능analyzerMode: 'static'설정으로 브라우저 자동 열기 비활성화
2. 번들 최적화 전략
splitChunks구성으로 공통 라이브러리 분리
```javascript
optimization: {
splitChunks: {
chunks: 'all'
}
}
```
sideEffects: false설정으로 사용되지 않는 코드 제거TerserWebpackPlugin사용으로 코드 압축 및 최소화
3. 정적 자원 최적화
url-loader및file-loader사용으로 이미지/폰트 처리
```javascript
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
```
image-webpack-loader로 이미지 압축 (예:mozjpeg,pngquant설정)
4. 동적 로딩 및 성능 개선
- 동적 임포트(
import())로 모듈 지연 로딩
```javascript
const SomeBigComponent = () => import('./SomeBigComponent');
```
Module Federation(Webpack 5+)로 라이브러리 공유 및 중복 제거
```javascript
new ModuleFederationPlugin({
name: 'host_app',
remotes: { remote_app: 'remote_app@' },
shared: ['react', 'react-dom']
})
```
5. 추가 최적화 기술
- CDN 사용으로 외부 라이브러리 로딩 시간 단축
- 캐싱 활성화로 빌드 속도 향상
```javascript
cache: {
type: 'filesystem'
}
```
- 소스맵(
devtool: 'cheap-module-source-map')으로 개발 시 디버깅 용이
결론
Webpack Bundle Analyzer를 통해 번들 크기 분석 후 splitChunks, TerserWebpackPlugin, 동적 임포트 등 전략적 최적화 적용. CDN 활용과 Module Federation은 중복 라이브러리 제거에 효과적. externals 설정으로 글로벌 라이브러리 사용 시 번들 크기 감소 가능.