코드 스플리팅 사용하기

코드 스플리팅 (code splitting) ?

 

페이지가 로드 될 때, 불필요한 컴포넌트는 불러오지 않고 필요한 컴포넌트들만 불러오도록 하는 기법.

 

리액트에서도 적용이 되지만, 웹팩(webpack)을 이용한 다른 어플리케이션에서도 모두 사용 가능하다.

웹팩도 간단 설명하자면, 어플리케이션의 모든 파일들을 묶고 압축하여 하나의 결과물로 만들어주는 웹개발 도구이다.

 

자바스크립트로 개발하고 배포하는 과정에서 빌드(build)과정을 거치게 되는데, 이 과정에서 모든 파일들이 하나로 합쳐지게 된다. 우리가 index.js, components들로 나눴던 소스 코드들이 하나로 합쳐지게 된다.  간단한 프로젝트라면 영향이 적겠지만, 거대한 프로젝트라면(특히 spa페이지에서) 길고 많은 js코드가 탄생한다. 이 경우 인터넷 환경이 좋지 못한 곳에서는 거대한 소스코드들을 불러오는데 상당한 로딩 시간을 갖게된다. 이를 개선하고자 코드에서 당장 사용하는 부분만 로딩하고, 현재 필오하지 않은 코드 부분은 따로 분리시켜 나중에 로드함으로써 로딩시간을 개선하는 것이 코드 스플리팅이다.

 

 

그래서 어떤 컴포넌트들을 분리할 지 고민이 많아짐.

 

그래서 어떤 기준으로 하면 좋을까?

 

- 페이지들을 분리함.

- 서버사이드렌더링이 필요 없는 애들을 기준으로 분리함.

 

 npm i @loadable/component

 

npm i --save-dev @types/loadable__component

 

-> react 애플리케이션에서 코드 분할을 활성화 한다.

 

 

 

App.tsx>

import loadable from '@loadable/component';

const LogIn = loadable(()=> import( '@pages/Login'));
const SignUp = loadable(()=> import( '@pages/SignUp'));

 

요렇게 페이지를 기준으로 분리를 하자.

 

코드 비동기 로딩

 

더 나은 사용을 위해 코드를 비동기적으로 코딩하는 방법이 있는데, 코드 비동기 로딩의 대표적인 예시가 코드 스플리팅이다.

 

기본적으로 js 함수는 import()함수를 통해서 분리할 수 있다. import()함수 형태로 메서드 안에서 사용하게 되면 필요할 때 해당 스크립트를 불러와서 사용할 수 있게 된다.

 

 

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

 

// src/notify.js

const notify = () => {
  window.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}>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에서 지원중이라 설정 없이 바로 사용가능

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

 

이렇게 하고나서, 개발자 도구에서 Network탭을 열은 다음에, 버튼을 눌러보아라.

 

그러면 다음과 같이 1.chunk.js라는 파일을 불러오게 되고, 그 안에 notify관련 코드가 들어있는 것을 확인할 수 있다.

이렇게 분리된 파일을 청크파일 이라고 한다.

 

 

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

리액트 프로젝트 코드 스플리팅 정복하기

 

위에 정리가 굉장히 잘 되어있기에 저장용 ..ㅎㅎ