코드 분할

의미

💡 따로 분리, 필요할 때만 사용 가능
💡 페이지 로딩 속도 개선

📗 서드파티 라이브러리로 번들 분할

import _ from 'lodash';//비효율적
_.find([]);

import find from 'lodash/find';//효율적
find([]);

메소드 중 하나를 불러와 쓰는 방법이 좋음

React에 적용

💡 SPA이므로 사용하지 않는 컴포넌트까지 불러오는 단점을 극복

📗 static import
정적 불러오기
코드 파일의 가장 최상위에서 import 지시자를 사용

import moduleA from "library";//최상단에 위치

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

const someFunction = () => {
  //
}

📗 dynamic import
동적 불러오기
구문 분석 및 컴파일해야 하는 스크립트의 양 최소화

form.addEventListener("submit", e => {
  e.preventDefault();
  
  //사용자가 form양식을 제출한 경우에만 작동
  import('library.moduleA')
    .then(module => module.default)
    .then(someFunction())
    .catch(handleError());
});

const someFunction = () => {
    //
}