자바스크립트 함수 비동기 로딩

컴포넌트 코드를 스플리팅 하기 전에, 일반 자바스크립트 함수를 먼저 스플리팅 해보겠습니다.

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 를 통하여 스플리팅된건 언제나 맨 마지막 숫자를 가진 파일에 들어가게 됩니다.