[React] 코드 스프리팅(code splitting)

설명

필요없는 컴포넌트들은 처음에 불러오지 않도록 하고, 필요한 컴포넌트들은 그때그때 불러오게 하는 기법.

 

어떤 컴포넌트들을 불러와야하나

  - 페이지들을 분리한다.(쉬운 기준)

        ex) 로그인 페이지에 와 있는데 굳이 회원가입 페이지를 미리 불러올 필요가 없는 경우가 있으면 로그인 페이지와 회원가입 페이지는 코드스프리트 해도 된다.

   - 서버사이드 렌더링이 필요없는 것들

        ex) 규모가 큰 텍스트 에디터들 같은 경우에는 굳이 서버에서 렌더링할 필요가 없다.

 

 

import LogIn from '@pages/LogIn';
import SignUp from '@pages/SignUp';

에서

const LogIn = loadable(() => import('@pages/LogIn'));
const SignUp = loadable(() => import('@pages/SignUp'));

로 바꾼다. 이렇게 하면 코드 스프리팅을 언제 할지, 언제 불러올지를 크게 고민할 필요 없이 알아서 불러온다.

 

추천

  페이지 단위로 코드 스프리팅 하는것을 추천한다고 한다.