# code_splitting

gygy

입사 첫 주차가 지나갔다.앞으로 매주 TWIL과 회고를 진행하려고 하는데, 오늘은 회사의 코드를 파악하면서 익숙하지 않은 새로운 개념들을 하나씩 정리해두려고 한다.회사에서는 Next.js를 별도로 사용하고 있지는 않고 React 자체에서 코드 스플리팅을 사용하고 있다.

jsw4215

싱글페이지 어플리케이션에서 번들 사이즈가 커지면 로딩속도나 성능면에서 문제가 생길 수 있다. 코드 스플리팅은 이것들을 여러개의 번들로 나누거나 동적으로 import 하는 기법을 말한다.React가 자체적으로 제공하는 React.lazy나 React.suspense도 있

jsw4215

react v16.6 이후부터는 코드 스플리팅을 위한 내장 함수인 React.lazy와 Suspense 컴포넌트가 생겼습니다.그 전 버전에서는 import 함수를 통한 비동기 로딩을 하며, 클래스형 컴포넌트를 사용해야 합니다.우선 자바스크립트 함수를 비동기 로딩해보겠습

zerozoo-front

react로 SPA를 만들다 보면 app의 사이즈가 커지면서 client side는 번들링 된 큰 용량의 파일을 다운 받게 된다.이 때 마치 app store에서 app 하나를 모두 다운받는 것과 같이 비용과 시간이 소비되게 된다.만약 app의 모든 기능을 전부 다 사