13. 코드 스플리팅

2019/07/12 - [WEB/REACT] - 12. react-router로 SPA

12. react-router로 SPA

이전글 이어서 진행

 

webpack 서정 밖으로 꺼내기

yarn eject

 

서드 파티라이블러들을 vendors 로 따로 분리한다. 이렇게 하면 추후 프로젝트를 업데이트할때 업데이트하는 파일 크기를 최소화시킬수 있다.

 

"webpack": "4.29.6" 기준설명

 

webpack.config.json

entry: [
    isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
],
    
/*
output: {
	path: path.resolve(__dirname, 'dist'),
	filename: '[name].js',
},
*/

optimization: {
   splitChunks: {
     cacheGroups: {
       commons: {
         test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom|cross-env|query-string)[\\/]/,
         name: 'vendors',
         chunks: 'all'
       }
     }
  }
},

 

 

webpack 버전이 높아서 위와같이 설정해야된다.

 

entry : https://webpack.js.org/configuration/entry-context/#entry

Entry and Context | webpack

output : https://webpack.js.org/configuration/output/

Output | webpack

optimization : https://webpack.js.org/configuration/optimization/#optimizationsplitchunks

Optimization | webpack

SplitChunksPlugin : https://webpack.js.org/plugins/split-chunks-plugin/#splitchunks-maxinitialrequests

SplitChunksPlugin | webpack

 

청크 분할에 대한 기술적 이야기 : https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

The 100% correct way to split your chunks with Webpack

webpack 강좌 : https://ibrahimovic.tistory.com/48

webpack 개념 0.Concepts

As of webpack v4 the CommonsChunkPlugin is deprecated : https://stackoverflow.com/questions/49017682/webpack-4-migration-commonschunkplugin

Webpack 4 migration CommonsChunkPlugin

 

결과)

적용전

 

적용후