Reactjs에서 code split에 대하여 알아봅니다.

1. codesplit
임광규
2020.ReactJS 1

2. codesplit
리액트프로젝트를완성하여사용자에게제공할때는 빌드 작업을거쳐서배포합니다.
빌드작업을통해프로젝트에서사용되는자바스크립트파일안에서불필요한 주석 , 경고 메시
지 , 공백 등을제거하여파일크기를최소화하고브라우저에서JSX문법이나다른최신자바스
크립트문법이원활하게실행되도록코드의 트랜스파일 작업도합니다.
이런작업은웹팩(webpack)이라는도구를사용합니다.
웹펙에서별도의설정을하지않으면프로젝트에서사용중인모든자바스크립트파일이하나의
파일로합쳐지고,모든CSS파일도하나의파일로합처집니다.
2020.ReactJS 2

3. reactstandardcodesplit
Create-React-app을이용하여프로젝트를생성하면최소두개이상의자바스크립트파일이
생성됩니다.
기본설정에는SplitChunks라는기능이적용되어node_modules에서불러온파일,일정크기이상
의파일,여러파일간의공유돈파일을자동으로따로분리시켜서캐싱의효과를제공합니다.
2020.ReactJS 3

4. build결과
/build/static/js밑에2.XXXX로시작하는파일이포함되어있습니다.
2로시작하는파일에는React,ReactDOM등node_modules에서불러온라이브러리관련코
드가들어있고,main으로시작하는파일에는직접프로젝트에작성하는App같은컴포넌트에
대한코드가들어있습니다.
소스코드를수정후다시빌드를해도node_modules의변경없이2.XXXX파일명은변하지않습니
다.
이렇게파일을분리하는작업을코드스프리팅이라고합니다.
2020.ReactJS 4

5. Reactcodesplit
Create-React-app으로생성된프로젝트에는단순히효율적인캐싱효과만있습니다.
A,B,C로구성되었고A페이지에서는B페이지와C페이지에서사용하는컴포넌트는필요하
지않습니다.
하지만리액트프로젝트에서별도로설정하지않으면A,B,C컴포넌트에대한코드가모두한파일
(main)에저장됩니다.
애플리케이션의규모가커지면지금당장필요하지않는컴포넌트정보도모두불러서파일크기가매
우커집니다.
이런문제를해결해줄수있는방법이바로 코드 비동기 로딩 입니다.
코드비동기로딩을통해자바스크립트함수,객체혹은컴포넌트를처음에는불러오지않고필요한시
점에불러와서사용할수있습니다.
2020.ReactJS 5

6. 자바스크립트함수비동기로딩
일반자바스크립트함수를스플리팅해본니다.
hi.js
export default () = {
alert("hi");
}
일반호출
import React from 'react';
import SayHi from './hi';
export default () = {
const onClick = () => sayHi();
return <div onClick={onClick}>HI</div>;
}
2020.ReactJS 6

7. 비동기로딩
import React from 'react';
export default () => {
const onClick = () => {
import('./hi').then(result => result.default());
};
return <div onClick={onClick}>HI</div>;
}
이렇게import를함수로사용하는문법은아직표준자바스크립트가아니지만dynamicimport라는
문법입니다.현재웹팩에서지원하고있음으로별도의설정없이프로젝트에바로사용할수있습니다.
이렇게불러온모듈에서default로내보낸것은result.default로참조해야사용할수있습니다.
2020.ReactJS 7

8. React.lazy와Suspense를이용한컴포넌트코드스플리팅
React.lazy와Suspense기능은리액트v16.6에도입되었습니다.
import React, { Suspense } from 'react';
const SayHi = React.lazy(() => import('./hi'));
export default () => {
const [visible, setVisible] = React.useState(false);
const onClick = () => setVisible(true);
return (
<div>
<p onClick={onClick}>HI</p>
<Suspense fallback={<div>loading...</div>}>
{visible && <SayHi />}
</Suspense>
</div>
);
}
2020.ReactJS 8

9. LoadableComponents를통한코드스플리팅
LoadableComponents는코드스플리팅을편하게하도록도와주는서드파티라이브러리입
니다.
이라이브러리의장점은서버사이느랜더링(SRR)을지원한다는것입니다.
또한랜더링하기전에필요한스프리팅된파일을미리불러올수있는기능도제공합니다.
서버사이드랜더링이란웹서비스의초기로딩속도개선,캐시및검색엔진최적화를가능하게해주는기술입니
다.서버사이드랜더링을사용하면웹서비스의초기랜더링을사용자의브라우정가아닌서버쪽에서처리합니
다.
2020.ReactJS 9

10. 설치&사용예
$ yarn add @loadable/component
or
$ npm install @loadable/component --save
import React from 'react';
import loadable from '@loadable/component';
const SayHi = loadable(() => import('./hi'));
export default () => {
const [visible, setVisible] = React.useState(false);
const onClick = () => setVisible(true);
return (
<div>
<p onClick={onClick}>HI</p>
{visible && <SayHi />}
</div>
);
}
2020.ReactJS 10

11. 로딩중다른UI를보여주고싶다면loadable를사용하는부분을다음과같이
수정합니다.
const SayHi = loadable(() => import('./hi'), {
fallback: <div>loading...</div>
});
2020.ReactJS 11

12. 컴포넌트미리불러오기
마우스커서를올리기만해도로딩이시작됩니다.
import React from 'react';
import loadable from '@loadable/component';
const SayHi = loadable(() => import('./hi'));
export default () => {
const [visible, setVisible] = React.useState(false);
const onClick = () => setVisible(true);
const onMouseOver = () => SayHi.preload();
return (
<div>
<p onClick={onClick} onMouseOver={onMouseOver}>HI</p>
{visible && <SayHi />}
</div>
);
}
2020.ReactJS 12

13. 마치며
React.lazy / Suspese 와 Loadable Components 의가장큰차이는서버사이드랜더링
(SRR)입니다.
서버사이드랜더링을구현할예정이면LoadableComponents를사용하도록래엑트공식문서에도
권장하고있습니다.
2020.ReactJS 13