Code Splitting

코드 스플리팅? 

Webpack과 같은 모듈 번들러에서 사용되는 중요한 기능이다. 

하나의 큰 번들을 여러개의 작은 번들들로 쪼개주는 기능을 한다. 

 

필요할때 필요한 번들만 로드 함으로써 초기 로딩시간을 줄여주고, 현재 페이지에서

필요없는 코드는 로드하지 않기 때문에 앱의 성능도 향상시킬 수 있다. 

 

하는 방법

@babel/plugin-syntax-dynamic-import

사용하는 방식으로 적용할 계획이다. 

 

npm i --save-dev @babel/plugin-syntax-dynamic-import

당연히 먼저 할일을 필요한 패키지를 다운받는 일이다. 

 

{
  "presets": [
   // ...
  ],

  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

바벨 설정 파일에 plugins에 @babel/plugin-syntax-dynamic-import를 추가한다. 

 

 import(/* webpackChunkName: "main_js" */ "./container/main").then(
    ({ default: main }) => main()
  );

그리고 필요한 곳에 dynamic import를 사용하면 된다.