코드 스플리팅이란?
코드 스플리팅이란?
SPA(Single Page Application) 의 단점으로 최초 페이지 접속할 때 웹 애플리케이션의 데이터를 다 불러와야한다.
복잡한 기능을 가진 애플리케이션의 경우 뿐만 아니라 사용하지 않는 페이지까지 불러와서 굉장히 느린 로딩 속도를 가지게된다.
이러한 초기 로딩 속도를 해결하기 위해 나온 것이 코드 스플리팅 Code Splitting 이며, 라우터를 통해 페이지에 접근할 때만 필요한 모듈을 가져온다.
코드를 하나의 큰 번들에서 여러개의 작은 번들로 분할하고 요청에 따라서 로드하거나, 병렬로 로드하여 어플리케이션의 성능을 향상시킬 수 있다.third-party 라이브러리 들을 하나의 번들로 묶어서 캐싱된 코드를 사용하는 방식으로 앱이 수정되어도 유저가 스크립트를 다시 다운 받지 않게 할 수도 있다.
청크
청크 Chunk 는 코드 스플리팅을 통해 생성되는 자바스크립트 파일 조각을 뜻한다.
청크 파일을 생성할 때 파일 이름을 정의할 수 있다.웹팩 에서는 인자를 통해 생성하거나 옵션을 통해서 설정할 수 있다.
React
리액트 React 의 경우 import, lazy, Suspense 를 통해서 코드 스플리팅을 이용할 수 있다.
import
일반적인 import 와는 다르게 import() 를 통해서 import 가 완료된 이후의 동작을 선언할 수 있다.
import("./math").then(math => {console.log(math.add(1,2))});lazy
dynamic import 를 통해서 구성 요소를 렌더링하는 데 사용한다.
const Component = React.lazy(() => import("./Component"));Suspense
lazy 로 호출되는 컴포넌트는 Suspense 컴포넌트를 통해서 렌더링해야하며, lazy 컴포넌트가 로드되기를 동안 Suspsne 의 fallback 프로퍼티로 선언된 렌더링 요소를 통해 표현할 수 있다.
import React, { Suspense } from 'react';
const Component = React.lazy(() => import('./Component'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<Component />
</Suspense>
</div>
);
}