npm run build
명령어 실행 시 아래와 같이 build/static
디렉토리 내부에 자바스크립트 파일이 여러 개 생긴 것을 볼 수 있다.// notify.js - 비동기로 로딩할 파일
export default function notify() {
alert('안녕하세요.');
}
// App.js
import React from 'react';
import notify from './notify';
const App = () => {
const onClick = () => {
notify();
};
return (
<div>
<h1>Hello React<h1>
<p onClick={onClick}>click!</p>
</div>
)
}
// App.js
import React from 'react';
const App = () => {
const onClick = () => {
import('./notify').then(result => result.default());
};
return (
<div>
<h1>Hello React<h1>
<p onClick={onClick}>click!</p>
</div>
)
}
import React from 'react';
const SplitMe = () => {
return <div>SplitMe</div>;
};
export default SplitMe;
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
state = {
splitMe: null
};
handleClick = async () => {
const loadedModule = await import('./SplitMe');
this.setState({
splitMe: loadedModule.default
});
};
render() {
const { splitMe } = this.state;
return(
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p onClick={this.handleClick}>
Hello React!
</p>
{splitMe && <SplitMe />}
</header>
</div>
)
}
}
const SplitMe = React.lazy(() => import('./SplitMe'));
import React, { useState, Suspense } from 'react';
(...)
<Suspense fallback={ <div>loading...</div> }
<SplitMe />
</Suspense>
// fallback props를 통해 로딩 중에 보여줄 JSX를 지정할 수 있다.
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
const SplitMe = React.lazy(() => import('./SplitMe'));
const App = () => {
const [visible, setVisible] = useState(false);
const onClick = () => {
setVisible(true);
};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p onClick={onClick}>
Hello React!
</p>
<Suspense fallback={ <div>loading...</div> }
{ visible && <SplitMe /> }
</Suspense>
</header>
</div>
);
};
Loadable Component는 코드 스플리팅을 편하게 하도록 도와주는 서드파티 라이브러리다. React.lazy와 Suspense는 서버사이드 렌더링을 지원하지 않는데 반해 이 라이브러리는 서버사이드 렌더링을 지원한다. 또한 렌더링 하기 전에 필요할 때 스플리팅된 파일을 미리 불러올 수 있는 기능도 있다.
사용법은 React.lazy와 비슷하며, Suspense를 사용할 필요가 없다.
설치 명령어 : npm install @loadable/component
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import loadable from '@loadable/component';
const SplitMe = loadable(() => import('./SplitMe'));
function App() {
const [visible, setVisible] = useState(false);
const onClick = () => {
setVisible(true);
};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p onClick={onClick}>
Hello React!
</p>
{visible && <SplitMe />}
</header>
</div>
);
}
export default App;
로딩중 다른 UI를 보여주고 싶을 때
const SplitMe = loadable(() => import('./SplitMe'), {
fallback: <div>loading...</div>
});
컴포넌트를 미리 불러오고 싶을 때
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
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">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p onClick={onClick} onMouseOver={onMouseOver}>
Hello React!
</p>
{visible && <SplitMe />}
</header>
</div>
);
}
export default App;