Webpack 3 CommonsChunkPlugin으로 번들 최적화하기

문제 상황

회사 프로젝트의 빌드 결과물이 2.3MB를 넘어가면서 3G 환경에서 초기 로딩이 10초 이상 걸리는 이슈가 발생했다. React, Lodash, Moment 등 라이브러리가 매번 함께 번들링되고 있었다.

CommonsChunkPlugin 적용

Webpack 3에서 제공하는 CommonsChunkPlugin을 사용해 vendor 청크를 분리했다.

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

manifest 청크 분리 이유

vendor만 분리하면 webpack runtime이 vendor에 포함되어, 앱 코드 변경 시 vendor의 해시값도 변경되는 문제가 있었다. manifest 청크로 runtime을 별도 분리하니 vendor 캐싱이 제대로 동작했다.

결과

• app.js: 2.3MB → 800KB
• vendor.js: 1.2MB (캐싱 가능)
• manifest.js: 5KB

초기 로딩은 여전히 2MB지만, 이후 배포에서는 app.js만 다시 받으면 되어 사용자 경험이 개선되었다. 다음은 dynamic import로 route별 code splitting을 적용해볼 예정이다.