[React] 코드 스플리팅

코드 스플리팅이란?

지금 당장 필요한 코드가 아니라면 따로 분리시켜서 필요할 때 불러와서 사용하는 것.

 

왜 필요한가?

리액트 앱은 SPA(Single Page Application)으로 하나의 js 파일에 모든 어플리케이션 로직들을 불러온다. 그래서 규모가 커지면 로딩 속도가 느려지게 된다. 이 때 당장 필요한 코드가 아니라면 따로 분리시켜놨다가 필요할 때 불러와서 사용하는 코드 스플리팅을 한다면 페이지의 로딩 속도를 개선시킬 수 있다.

 

코드 스플리팅 해보기

1. React 프로젝트 생성

2. 코드 스플리팅할 함수 준비

src/notify.js

function notify() {
    alert("띵동")
}

export default notify;

src/App.js

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

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

export default App;

띵동 버튼 클릭 시 아래와 같이 alert 창이 뜬다.

그런데 이 notify 함수는 사실 버튼 클릭 전까지는 불러올 필요가 없는 코드이다. 따라서 이 코드를 코드 스플리팅해볼 것이다.

 

3. 함수를 코드 스플리팅해보기

notify를 사용하기 위해 상단에 import notify from './components/notify'; 이런식으로 불러와줬던 코드를 handleClick 메소드에서 import를 함수로 호출하여 불러와서 사용하는 것으로 바꾼다.

src/App.js

import './App.css';

function App() {
  const handleClick = () => {
    import('./components/notify').then(({default:notify})=>{
      notify();
    })
  };
    return (
      <div className="App">
        <button onClick={handleClick}>띵동</button>
      </div>
    );
  }

export default App;

이처럼 바꿔주고 띵동 버튼을 클릭해봐도 잘 되는 것을 확인해볼 수 있다.

코드 스플리팅이 잘 됐는지 확인해보는 방법은 network 탭을 열고 띵동 버튼을 눌러보면, 버튼을 눌렀을 때 chunk 파일이 생기는 것을 확인할 수 있다.이 안에는 notify  관련 코드가 들어있는 것을 확인할 수 있다. 이렇게 분리된 파일을 청크 파일이라고 한다.

import를 함수로 사용해주면, 웹팩이 알아서 코드를 분리하여 따로 저장을 했다가  import가 호출될 때 불러와서 사용할 수 있게 해준다.

 

4. 컴포넌트를 코드 스플리팅해보기

src/SplitMe.jsx

const SplitMe = () => {
    return <div>컴포넌트 스플리팅</div>;
}

export default SplitMe;

src/App.jsx

import { useState } from "react";
import "./App.css";

function App() {
  const [split, setSplit] = useState(null);

  const handleClick = () => {
    import("./SplitMe").then(({ default: SplitMe }) => {
      setSplit(SplitMe);
    });
  };
  return (
    <div className="App">
      <button onClick={handleClick}>띵동</button>
      {split ?? split}
    </div>
  );
}

export default App;

SplitMe 컴포넌트를 만들고 띵똥 버튼을 누르면 SplitMe 컴포넌트가 import될 수 있도록 해준다.

 

 

처음에는 import되어 있지 않다가 띵동 버튼을 누르면

SplitMe 컴포넌트를 불러오는 것을 볼 수 있다.

이렇게 동적 import를 통해 컴포넌트가 사용될 때만 불러올 수 있다.

 

5. React.lazy, Suspend

6. react-loadable

 

 

[참고]

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

https://bamtory29.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%AC%ED%8C%85