01.18 리액트 코드 스플리팅
React.js 01.18. 리액트 코드 스플리팅 싱글 페이지 애플리케이션 의 단점 은 페이지 로딩 속도 가 지연 될 수 있다는 것이다. 로딩 속도가 지연되는 이유는 자바스크립트 번들 파일에 모든 애플리케이션 의 로직 을 불러오므로 규모가 커지면서 용량도 커지기 때문 이다. 하지만 이 문제는 코드 스플리팅(code splitting) 을 하면 해결할 수 있다. 코드 스플리팅(code splitting) 은 말 그대로 코드를 분할한다 는 의미이다. webpack에서 프로젝트를 번들링할 때 파일 하나라 아니라 여러 개로 분리시켜서 결과물을 만들 수 있다. 또 페이지를 로딩할 때 한꺼번에 불러오는 것이 아니라 필요한 시점에 불러올 수도 있다. 01.18.1. 코드 스플리팅의 기본 webpack4 이전의 버전에서는 vendor 를 직접 설정해야 했지만, webpack4 부터는 자동으로 생성해주기 때문에 별도의 설정은 하지 않아도 된다. 01.18.1.1. 비동기적 코드 불러오기: 청크생성 페이지에서 필요한 코드들만 불러오려면, 청크(chunk)를 생성해야한다. 청크를 생성하면 페이지를 로딩할 때 필요한 파일만 불러올 수 있고, 아직 불러오지 않은 청크 파일들은 나중에 필요할 때 비동기적으로 불러와 사용하라 수 있다. // src/components/SplitMe.js import React from 'react' ; const SplitMe = () => { return ( < h3 > 청크 < /h3> ); }; export default SplitMe; 청크를 생성할 컴포넌트 자체는 특별히 하는 것이 없다. 다만 이 컴포넌트를 불러오는 것이 평상시와는 조금 다르다. 비동기적으로 파일을 불러오려면 import 를 코드 최상단에 적는 것이 아니라, 특정 함수 내부에서 작성한다. LifeCycle 메서드 안에 넣을 수도 있고, 별도