Loadable Components로 코드 스플리팅하기
🐕 인트로
https://xionwcfm.tistory.com/256
저번에 학습한 React.lazy의 연장선으로 코드 스플리팅을 도와주는 라이브러리인
Loadable Components를 학습해보려고 합니다.
이 라이브러리는 서버 사이드 렌더링을 지원한다는 장점이 있습니다.
또한 렌더링 하기 전에 필요할 때 스플리팅 된 파일을 미리 불러올수도있고요!
$ yarn add @loadable/component먼저 install을 해주고 사용해봅시다.
👻loadable 문법과 React.lazy 문법
import logo from './logo.svg';
import './App.css';
import React, { useState} from 'react';
import loadable from '@loadable/component';
const SplitMe = loadable(() => import('./SplitMe'), {
fallback: <div>loading..</div>,
});
function App() {
const [visible, setVisible] = useState(false);
const onClick = () => {
setVisible(true);
};
return (
<div className="App">
<p onClick={onClick}> hello react</p>
{visible && <SplitMe />}
</div>
);
}
export default App;대표적인 차이점은 Suspense 컴포넌트를 사용할 필요가 없다는 것이네요!
그럼 Suspense 컴포넌트에서 내려주던 prop fallback의 역할은 어디서해야할까?
라는 생각이 드는데 그부분은 두번째 인자에 객체형태로
fallback시에 렌더링될 요소를 넣어서 보내주는 것으로 해결하네요!
🥶 preload를 해보자
근데 전 이 비동기 방식 자체에 살짝 의문이 있었습니다.
왜냐면 작은 코드를 비동기로 불러오는거야 상관없겠지만은
만약 무겁고 복잡한 코드를 불러올때는 그 코드를 불러오는 시간이
너무 길수가 있잖아요? 아무리 생각해도 미리 불러오기를 해야할 것 같은데..
라고 생각을 하고있었는데 그 의문점을 preload가 깔끔하게 해결해줍니다.
import logo from './logo.svg';
import './App.css';
import React, { useState } from 'react';
import loadable from '@loadable/component';
const SplitMe = loadable(() => import('./SplitMe'), {
fallback: <div>loading..</div>,
});
function App() {
const [visible, setVisible] = useState(false);
const onClick = () => {
setVisible(true);
};
const onMouseOver = () => {
SplitMe.preload();
};
return (
<div className="App">
<p onClick={onClick} onMouseOver={onMouseOver}>
{' '}
hello react
</p>
{visible && <SplitMe />}
</div>
);
}
export default App;preload()함수를 이용하면 미리 불러올 수 있습니다.
따라서 Mouse가 p태그 위에 올라가면 로딩이 시작되게 되는 코드입니다.
사용법이 완전 간단하네요
🐶마치며
Loadable Components는 미리 불러오는 기능 외에도
타임 아웃이나 로딩 UI 딜레이, 서버 사이드 렌더링 호환 등의 다양한 기능을 제공합니다.
전 웹팩 설정을 만져서 파일을 나눠놓는것을 생각했는데
이런식으로도 코드스플리팅이 가능하군용
