코드 스플리팅이란?

코드 스플리팅

https://velog.io/@velopert/react-code-splitting

정의

우리가 js로 개발하게 되면, 기본적으로는 하나의 파일에 모든 로직들이 들어가게 된다.

그럼, 프로젝트의 규모가 커질수록 js 파일 용량도 커질 것이다. (특히 SPA)
용량이 커지면, 인터넷이 느린 환경에서는 페이지 로딩 속도가 느려질 것이다.

코드 스플리팅을 하게되면, 지금 당장 필요한 코드가 아니라면 따로 분리시켜서, 나중에 필요할 때 불러와서 사용할 수 있다. 이를 통해 페이지의 로딩 속도를 개선할 수 있다.

실습

CRA로 프로젝트를 만든다.

src 디렉토리에 아래와 같은 notify함수를 만든다.

// src/notify.js

const notify = () => {
  window.alert("종소리 울려라");
};

export default notify;

App코드를 수정한다.

// src/App.js

import "./App.css";
import notify from "./notify";

function App() {
  const handleClick = () => {
    notify();
  };
  return (
    <div className="App">
      <button onClick={handleClick}>Click!</button>
    </div>
  );
}

export default App;

그럼 App에서 저 버튼을 누르면 alert이 잘 동작할 것이다.

근데 사실 저 버튼을 클릭하기 전까지는 notify는 필요없는 코드이다.

이 때 코드 스플리팅을 적용하여, 지금 당장 필요하지 않은 코드를 분리시켜보자.

import "./App.css";

function App() {
  const handleClick = () => {
    import("./notify").then(({ default: notify }) => {
      notify();
    });
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Click!</button>
    </div>
  );
}

export default App;

import문을 코드 블록 아래로 내렸다.

이때 import는 Promise를 반환하게 된다.

이것은 바벨 stage-3 단계에 있는 dynamic import 라는 문법이다.
(현재는 webpack에서 지원중이라 설정없이 바로 사용가능)

이 함수는 모듈을 비동기적으로 CommonJS형태로 불러와서 따로 default를 명시해주어야함.

그러면 위 화면과 같이 클릭시 1.chunk.js라는 파일을 불러오게 된다.

저기 안에 notify 관련 코드가 들어 있는 것이다.

즉, import를 함수로 사용해주면, 웹팩이 알아서 코드를 분리해주고 저장해주고, import가 호출할 때 불러와서 사용할 수 있게 해준당.

위 예제는 일반적인 handler 함수를 스플리팅한것인데
React 컴포넌트도 스플리팅할 수 있다.

또한 그 스플리팅을 HOC로 추출하여 사용성을 향상시킬 수도 있다!.

자세한 코드는 여기를 참고.