코드 분할 (Code Spliting)

• React 앱들은 대부분 Webpack, Rollup 등을 이용해 번들링(Bundling)
• 번들된 앱은 모든 JavaScript가 한 곳에 있기 때문에 링크 태그 하나만으로도 전달 가능
• but 브라우저(JavaScript 엔진)이 해석해야 하는 자바스크립트 코드의 양이 많아지면서 코드 스플리팅의 필요성이 생김
• 당장 필요한 코드만 불러오고, 나중에 필요한 코드는 그 때 가서 불러오도록 코드를 분할하는 것이 핵심 개념
• 코드 분할을 통해 대규모 프로젝트 앱인 경우에도 페이지의 로딩 속도를 개선할 수 있다.

번들 분할 혹은 줄이는 법

• 앱을 개발하면서 쓰는 서드파티 라이브러리도 번들 파일에 포함된다.
• 서드파티 라이브러리는 다양한 메소드를 제공하기 때문에 코드의 양이 많고, 번들링 시 많은 공간을 차지한다.
• 따라서 라이브러리 전체를 불러와서 사용하는 것보다 필요한 것만 부분적으로 불러와서 사용한다.

lodash 라이브러리의 메소드 중 하나를 사용할 경우

// 라이브러리를 전체를 불러와서 메소드 하나를 쓴 경우 (비효율적)
import _ from 'lodash';

_.find([]);

// 메소드 하나만 불러운 경우 (권장)
import find from 'lodash/find';

find([]);

---

리액트에서의 코드 분할 : Dynamic Import

• React는 SPA(Single-Page-Application)이다.
• 첫 접속 시 사용하지 않는 모든 컴포넌트까지 모두 한 번에 불러오기 때문에 첫 화면이 렌더링 될때까지의 시간이 오래 걸린다.
• 사용하지 않는 컴포넌트는 나중에 불러오기 위해 코드 분할 개념을 도입.

Dynamic Import

form.addEventListener("submit", e => {
  e.preventDefault();
     import('library.moduleA') // 코드의 중간에 불러오기 가능
    .then(module => module.default)
    .then(someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // moduleA를 여기서 사용
}

• 사용자가 form을 통해 양식을 제출한 경우에만 moduleA를 import 하도록 했음.

• Dynamic import는 then 함수를 사용해 필요한 코드만 가져온다.
• 가져온 코드에 대한 모든 호출은 해당 함수 내부에 있어야 한다.
• 이 방식을 사용하면 번들링 시 분할된 코드(청크)를 지연 로딩시키거나 요청 시에 로딩할 수 있다.
• Dynamic import는 React.lazy 와 함께 사용할 수 있습니다.

참고: 기존 방식과 비교

Static Import (코드 분할 X)

// 파일의 최상위에서 import 지시자를 이용해 라이브러리 및 파일을 불러옴
import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // 코드 중간에서 불러온 파일(moduleA) 사용
}