Angular 4 업그레이드 후 빌드 사이즈 최적화

문제 상황

회사 프로젝트를 Angular 2.4에서 4.0으로 업그레이드했다. 공식 문서에서는 번들 사이즈가 크게 줄어든다고 했지만, 실제로는 5% 정도밖에 감소하지 않았다.

원인 파악

빌드 설정을 확인해보니 AOT 컴파일이 제대로 동작하지 않고 있었다. angular-cli를 사용하지 않고 직접 Webpack을 구성했는데, @angular/compiler-cli 버전이 맞지 않았다.

해결 과정

1. AOT 컴파일 활성화

// webpack.config.prod.js
const AotPlugin = require('@ngtools/webpack').AotPlugin;

module.exports = {
  plugins: [
    new AotPlugin({
      tsConfigPath: './tsconfig.json',
      entryModule: './src/app/app.module#AppModule'
    })
  ]
};

2. 불필요한 모듈 제거

각 모듈의 import를 점검하니 사용하지 않는 Material 컴포넌트들이 포함되어 있었다. 필요한 것만 선택적으로 import하도록 수정했다.

// Before
import { MaterialModule } from '@angular/material';

// After
import { MdButtonModule } from '@angular/material';
import { MdCardModule } from '@angular/material';

3. Uglify 옵션 조정

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    screw_ie8: true,
    conditionals: true,
    unused: true,
    comparisons: true,
    sequences: true,
    dead_code: true,
    evaluate: true,
    if_return: true,
    join_vars: true
  },
  mangle: {
    screw_ie8: true
  }
})

결과

• 최종 번들 사이즈: 1.2MB → 850KB (약 29% 감소)
• 초기 로딩 시간: 3.2초 → 2.1초

AOT 컴파일을 제대로 적용하는 것이 가장 큰 영향을 미쳤다. Webpack 설정을 직접 관리할 때는 버전 호환성을 더 꼼꼼히 확인해야겠다.