React-router - Code Splitting(prodoction) _Environment

ReactJS - Code Splitting(prodoction)_Environment

react-router v4 version4

sorce code는 이전 문서에서 재활용한다.

/...../ 는 생략되었다는 표시임

파란 글씨는 추가된 것임

빨간 글씨는 수정된 것임

ReactJS - Code Splitting

한개의 파일에서 처음 시작부터 모든 것들을 불러 오는 것이 아니라 개발자가 설정하는데로 파일이 필요해질 때 불러오게 하는 기법이다.

다음 명령을 통해서 webpack 및 babel 환경설정을 밖으로 꺼내자

~cra-router$ yarn eject

vendor

전역적으로 사용되는 vendor라 불리는 라이브러리를 따로 분리시켜주자.

~cra-router/config$ webpack.config.dev.js : entry

 entry: [

require.resolve('react-dev-utils/webpackHotDevClient'),

require.resolve('./polyfills'),

require.resolve('react-error-overlay'),

paths.appIndex.Js,

]

dev : 개발에만 필요한 react-error-overlay를 객체로 변환하여 dev에저장

vendor: 전역적으로 사용하는 라이브러리 vendor에 저장

app: 코드가 수정되면 바로 브라우져 새로고침이 일어나게 할 것들을 app에 저장

이부분을 다음과 같이 수정하자.

~cra-router/config$ webpack.config.dev.js : entry

entry : {

dev: 'react-error-overlay',

vendor: [

require.resolve('./polyfills'),

'react',

'react-dom',

'react-router-dom',

],

app: ['react-dev-utils/webpackHotDevClient'. paths appIndexJs]

}

filename부분의 [hash]값은 앱이 빌드 될 때마다 새로운 값이 생겨난다. 파일마다 고유의 이름을 가질 수 있게 되고 코드가 업데이트 되었을 때 기존의 캐쉬를 사용하지 않고 최신 파일을 불러와서 사용하도록 할 수 있다.

chunkfile: webpack에서 미리 분리시킨 파일 말고, 우리가 코드를 통해서 직접 분리시킨 파일

~cra-router/config$ webpack.config.dev.js : output

filename: 'static/js/[name].[hash].js',

chunkFilename: 'static/js/[name].[chunkhash].chunk.js',

서버를 다시 실행하고(yarn start) 크롬 브라우저 개발자도구에서 Network를 열고 새로고침하면 다음과 같이 분리된것처럼 보일 것이다.

그러나 분류만 되었을 뿐 내부적으로는 아직 부족한 면이 있다. plugins를 이용하여 개선해보자.

~cra-router/config$webpack.config.dev.js : plugins

plugins: [

new webpack.optimize.CommonsChunkPlugin({

name: 'vendor',

}),

/....../

],

이상으로 코드 스플리팅을 위한 준비 작업이 끝났다.