코드스플리팅

코드 스플리팅?

 

SPA 에서 웹사이트가 방대하다고 가정한다면,

컴포넌트가 몇 만개가 될 가능성이 존재한다.
처음 비어있는 index.html 에서 웹팩을 사용해 번들링한 하나의 .js 페이지를 대기하면 페이지 로딩이 오랜시간 걸림.

그렇기 때문에,

 

필요없는 컴포넌트는 번들링한 하나의
.js 페이지에서 처음에 불러오지 않도록 하는것이 코드스플리팅.

즉, 처음에 필요없는건 나중에 불러오는 방식

 

그렇다면 기준은 아래 1,2처럼 잡자

1.pages 폴더 (서비스 별로 나뉘어져 있는 폴더임) 컴포넌트 기준으로

2.서버사이드렌더링 안될 애들

 

npm install @loadable/component
Typescript 사용시 
npm i --save-dev @types/loadable__component

https://loadable-components.com/docs/getting-started/

Loadable Components