[프론트엔드] 코드 스플리팅 [2]

 

2. 자바 스크립트 비동기 로딩

 

 

2.1 자바스크립트 함수 스플리팅

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

src 디렉토리에 nodjfy.js 파일을 생성하여 다음 함수를 작성해 보세요.

 

 

- nodify.js

export default function nodify() {
  alert("빌드 테스트중입니다.");
}

 

 

작성이 끝났으면 App.js 파일에서  nodify 함수가 실행되도록 코드를 수정하세요.

 

 

- App.js

import logo from "./logo.svg";
import "./App.css";
import nodify from "./nodify";

function App() {
  const onClick = () => {
    nodify();
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick}>Hello React!</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

 

이렇게 코드를 작성하고 빌드를 하게 되면 notify 코드가 main 파일안에 들어가게 됩니다.

하지만 다음과 같이 import를 상단에서 하지 않고 import() 함수의 형태로 메서드 안에서 사용하면, 파일을 따로 분리시켜서 main 코드안에 저장하게 됩니다.

 

그리고 실제 함수가 필요한 시점에만 파일을 불러와서 함수를 사용할 수 있습니다.

 

다시한번 아래와 같이 App.js를 수정해 보세요. 

 

 

- App.js

import logo from "./logo.svg";
import "./App.css";

function App() {
  const onClick = () => {
    import("./nodify").then((result) => result.default());
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick}>Hello React!</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

import 함수로 다음과 같이 사용하면 Promise를 결과로 반환하게 됩니다. 다음과 같이 import를 함수로 사용하는 문법은 자바스크립트 표준은 아니지만, stge-3 단계에 있는 dynamic import 라는 문법입니다.

 

현재는 웹팩에서 해당문법을 지원하고 있기 떄문에 별도의 설정을 하지 않고 프로젝트 바로 사용이 가능합니다. 이 함수를 통해서 모듈을 불러올 때 모듈에서 default로 내보낸것은 result.default를 참조해야 사용할 수 있습니다.

 

2.2  실행 결과

 

이제 브라우저에서 해당 프로젝트를 실행하고 개발자도구 Network탭을 연 다음에 Hello React! 를 클릭해 보세요.

 

클릭하는 시점에 javascript 파일에서 chunk.js 파일을 불러올 것입니다.

 

 

불러온 파일에는 notify로 실행한 관련 코드만 들어 있습니다.

 

이제 yarn build를 입력해서 빌드해 보세요.

 

 

새롭게 "3"으로 시작하는 chunk.js 파일이 build/static/js 안에 들어가 있는것을 확인 할 수 있습니다.