Webpack 3에서 Code Splitting 적용하며 번들 사이즈 줄이기

문제 상황

회사 프로젝트의 번들 사이즈가 2MB를 넘어가면서 초기 로딩 속도가 심각하게 느려졌다. 특히 모바일 환경에서 사용자 이탈률이 높아지고 있었다.

Code Splitting 적용

Webpack 3의 CommonsChunkPlugin을 사용하여 vendor 코드를 분리했다.

// webpack.config.js
module.exports = {
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom', 'lodash']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    })
  ]
};

Dynamic Import로 라우트별 분리

React Router와 함께 import() 문법을 사용하여 라우트별로 청크를 분리했다.

const AsyncDashboard = asyncComponent(() => 
  import('./pages/Dashboard').then(module => module.default)
);

const AsyncSettings = asyncComponent(() => 
  import('./pages/Settings').then(module => module.default)
);

결과

• 초기 번들: 2.1MB → 1.2MB (43% 감소)
• 초기 로딩 시간: 4.2초 → 2.1초 (50% 개선)
• vendor 청크는 캐싱 효과로 재방문 시 로딩 시간 대폭 감소

추가 최적화

UglifyJsPlugin의 압축 옵션을 강화하고, production 빌드에서 source map을 제거했다. 다음 단계로는 이미지 lazy loading과 서버사이드 렌더링을 검토할 예정이다.