2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
리액트 라우터 v4 와 코드 스플리팅

리액트는 알다시피 한번에 모든 페이지 정보가 스크립트로 들어감.
그러다보니 방문하지 않을 페이지의 코드까지 로드하니 비효율적일 때가 있다.

해당 페이지로 라우팅되었을 때만 그 페이지 코드를 불러오게 해보자.

사용된 모듈은 react, react-dom, react-router-dom 이다.
리액트 라우터는 v4다.

app.js (html에서 불러오는 코드 파일이다.)

여기에 보면 ./lib/asyncRoute 를 불러와서 외부 파일 비동기 호출할 수 있게 만들었다.

./lib/asyncRoute.js

 

이렇게 파일 만들어 놓고 app.js에 보면 알겠지만 Route의 component = { Comp1 } 은 변수로 정의한 위 asyncRoute.js 의 함수를 실행해서 반환받는다.

webpack3로 build 할 때 webpack.config.js 는 http://naminsik.com/blog/3575 를 참고하면 된다.

HoldHolic

nain

이메일 : nis@naminsik.com

리뉴얼하려고 생각한지가 어느덧 3년이 지났다. ㅠ 망...
.