자바스크립트 함수 비동기 로딩
컴포넌트 코드를 스플리팅 하기 전에, 일반 자바스크립트 함수를 먼저 스플리팅 해보겠습니다.
src 디렉토리에 notify.js 파일에 notify 함수를 작성하여 내보내세요:
src/notify.js
export default function notify() {
alert('띵동! 코드가 스플리팅되었습니다.');
}
이제, App 에서 리액트 로고를 누르면 해당 함수를 호출하도록 설정해보겠습니다.
src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import notify from './notify';
class App extends Component {
handleClick = () => {
notify();
};
render() {
return (
<div className="App">
<img
src={logo}
className="App-logo"
alt="logo"
onClick={this.handleClick}
/>
<p>Hello React!</p>
</div>
);
}
}
export default App;
이렇게 하고 build 하면, 여러분들의 예상대로 notify 코드는 main 파일에 들어가게 됩니다. 하지만, 다음과 같이 import 를 상단에서 사용하는게 아니라, 함수형태로 메소드안에서 사용하게 된다면 파일을 따로 분리시키게 됩니다. 그리고, 실제 함수가 호출 될 때 파일을 불러와서 우리가 필요한 함수를 사용하게 되지요.
src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
handleClick = () => {
import('./notify').then(result => {
result.default();
});
};
render() {
return (
<div className="App">
<img
src={logo}
className="App-logo"
alt="logo"
onClick={this.handleClick}
/>
<p>Hello React!</p>
</div>
);
}
}
export default App;
import 를 함수로 사용하면, Promise 를 반환합니다. import() 함수는 아직 표준은 아니지만 stage-3 단계에 있는 dynamic import 라는 문법입니다. 현재는, webpack 에서 지원해주고 있는 함수이기에 여러분의 프로젝트에서 별도의 설정 없이 바로 사용 할 수 있습니다. 이를 통하여 모듈을 불러오게 되면 default 로 내보낸것은 불러온 결과물의 .default
를 입력해야 참조 할 수 있습니다.
한번 개발자 도구의 Network 탭을 열고 리액트 로고를 클릭해보세요.
0.chunk.js 파일에 우리가 작성했던 notify 함수가 들어있습니다.
이 상태로, build 를 하게된다면, 실제로는 1.___.chunk.js
파일이 생성되고 그 안에 notify 가 들어가게 됩니다. 그리고 2.___.chunk.js
파일 안에 SplitChunk 를 통하여 스플리팅된 코드가 들어갑니다. SplitChunk 를 통하여 스플리팅된건 언제나 맨 마지막 숫자를 가진 파일에 들어가게 됩니다.