프론트엔드 코드 최적화: 코드 스플리팅이 뭘까 (feat.SEO, React18)

코드 스플리팅이란? 
초기 로드 시점에 모든 코드를 다운로드 하지않고 필요한 컴포넌트만 로드하여 초기로딩 시간을 줄이고 성능을 개선하는 방법 (비동기 컴포넌트 랜더링!)
 
리액트에서는 
React.lazy와 Suspense를 사용해 구현이 가능하다. 
둘 다 16.6버전에서 처음 도입되었고
18버전부터는 Suspense의 기능이 더욱 강회되어서 비동기 데이터 처리에도 사용이 가능해졌다! 
 
 
Suspense와 Lazy 사용법

import React, { Suspense, lazy } from 'react';

.... {

const LazyComponent = lazy(() => import('./로드가 오래 걸리는 컴포넌트명'));
.
.
.
return <Suspense fallback={<div>Loading component...</div>}> <LazyComponent/></Suspense>

}

 
이렇게 구현하면 초기 번들에 모든 코드가 포함되는것이 아니라 
해당 컴포넌트가 필요한 시점에 로드된다! 
 
SEO(검색 엔진 최적화)에도 도움이 되고 
초기 로딩속도가 줄어드는 장점이 있음 ~,~