Webpack 3에서 Code Splitting 적용하며 겪은 문제들

문제 상황

서비스가 커지면서 번들 크기가 2.3MB까지 증가했다. 사용자가 랜딩 페이지만 보려고 해도 전체 번들을 다운로드해야 하는 상황이었다.

해결 과정

Webpack 3의 CommonsChunkPlugin과 동적 import를 활용해 코드를 분리했다.

// 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: 'runtime'
    })
  ]
};

라우트별로 코드를 나누기 위해 import()를 사용했다.

const Dashboard = Loadable({
  loader: () => import('./pages/Dashboard'),
  loading: Loading
});

겪은 문제

1. 런타임 청크 이슈: runtime 청크를 분리하지 않으면 vendor 청크가 app 청크 변경 시마다 해시가 바뀌었다. 캐싱이 무용지물이 되는 상황.

2. 청크 로딩 실패: CDN 배포 후 일부 청크가 404를 반환했다. output.publicPath를 제대로 설정하지 않아서 발생한 문제였다.

output: {
  publicPath: 'https://cdn.example.com/assets/'
}

결과

• 초기 번들: 2.3MB → 450KB
• FCP: 4.2s → 1.8s

청크 분리 전략을 세울 때는 실제 사용 패턴을 분석하는 게 중요했다. webpack-bundle-analyzer로 각 페이지별 의존성을 확인하고 분리 지점을 결정했다.