코드 스플리팅

윕팩 : 리액프 프로젝트를 사용자에게 제공하기 위해서는 빌드 작업을 통해서 주석, 경고 메세지, 공백등을 제거하여 파일 크기를 최소화 하기도 하며, 브라우저에서 JSX문법이나 다른 최신 자바스크립트 문법이 원할하에 실행되도록 코드의 트랜스파일 작업도 실행하는 작업을 담당함다.

웹팩에서 별도의 설정을 하지 않는 경우 프로젝트에서 사용중인 모든 자바스크립트 파일과 모든 CSS 파일이 각각 하나로 합쳐진다. 이러한 경우 당장 필요하지 않은 컴포넌트 정보도 불러오며 로딩시간이 길어지기에 코드 스플리팅중 하나인 비동기 로딩을 통하여 필요한 시점에 불러와서 사용할 수 있다.

 

import를 함수로 사용하면 Promise를 반환하는데 이를 이용하여 코드 스플리팅을 할 수 있다.

React.lazy와 Suspense

React.lazy : 컴포넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 잇게 해주는 유틸 함수

const SpliteMe = React.lazy(() => import('/SpliteMe'));

 

Suspense : 리액트 내장 컴포넌트로서 코드 스플리팅된 컴포넌트를 로딩하도록 발동 시킬수 있고 로딩이 끝나지 않았을 때 보여줄 UI 설정 가능

import React, {Suspense} from 'react';

(...)
<Suspense fallback={<div>loading...</div>}>
<SpliteMe/>
</Suspense>

suspense에서 fallback props를 통해 로딩주에 보여줄 JSX를 지정할 수 있다.

 

Loadable Components : 코드스플리팅을 편하게 도와주는 서드파티 라이브러리, 서버사이드 렌더링을 지원한다(React.lazy와 Suspense는 아직 서버사이드 렌더링을 지원하지 않는다) 또한 렌더링하기 전에 필요한 스플리팅된 파일을 미리 불러올 수 있는 기능도 있다.

 

서버사이드 렌더링 : 웹서비스의 초기 로딩속도 개선, 캐싱 및 검색 엔진 최적화를 가능하게 해주는 기술이다. 웹서비스의 초기 렌더링을 사용자 브라우저가 아닌 서버쪽에서 처리하기에 사용자는 서버에서 렌더링한 html 결과물을 받아와서 그대로 사용하기에 초기로딩속도 개선에 도움을 준다.