코드 스플리팅

리액트 프로젝트는 제공할 때는, 빌드 작업을 거쳐서 배포해야 합니다.
이 빌드된 파일의 크기를 줄이고, 최적화하는 작업이 아주 중요하다고 할 수 있습니다.

웹팩

• JS 파일 안에서, 주석, 공백 등을 제거해서 최소화 하기도 합니다.

• JSX 문법이나 다른 최신 JS 문법이 원활하게 실행되도록 코드의 트랜스파일 작업도 수행합니다.

• 정적 파일의 경우 해당 파일의 경로를 설정해 줍니다.

• 사용 중인 모든 JS 파일이 하나의 파일로 합쳐지고, CSS 파일도 하나의 파일로 합쳐집니다.

• CRA의 경우 빌드 시 두개 이상의 JS 파일이 생성되는데, node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파일을 자동으로 따로 분리 시켜 캐싱의 효과를 누릴 수 있습니다.

---

프로젝트를 생성해서 빌드를 해봅시다.

최소 2개 이상의 JS 파일이 생기는데, SplitChunks 기능이 적용되어 분리시켜 캐싱을 해줍니다.

• node_modules 에서 불러온 파일
• 일정 크기 이상의 파일
• 여러 파일 간에 공유된 파일

뭔가 파일이 생기는데 a923df9 처럼 해시값이 포함되어 있습니다.
빌드하는 과정에서 해당 파일의 내용에 따라 생성되며, 이를 통해 브라우저가 새로 파일을 받아야할지 말아야할지 알 수 있습니다.

main 없이 숫자로 시작하는 파일은 React,React.DOM 등 node_modules 에서 불러온 라이브러리가 들어있고,
main으로 시작하는 부분은 프로젝트가 작성되어 App 같은 컴포넌트에 대한 코드도 적혀있습니다.

자주 바뀌지 않는 코드들이 Main이 없는 숫자로 시작하는 파일로 작성되어, 캐싱의 이점을 더 오래 누릴 수 있습니다.

• 프로젝트 내의 (App.js) 코드를 수정합니다.
  -> node_modules 는 변하지 않기 때문에 숫자로 시작하는 파일의 이름은 바뀌지 않습니다.
  -> 컴포넌트 관련 코드인 main만 바뀌게 됩니다.

---

이렇게 파일을 분리하는 작업을 코드 스플리팅이라고 합니다.

별 다른 설정을 하지 않으면 컴포넌트에 관한 모든 코드가 한 파일에 적히게 됩니다. 어플리케이션이 커지면, 당장 필요하지 않은 컴포넌트 정보도 모두 불러오면서 파일 크기가 매우 커집니다.

이러한 문제를 해결할 수 있는 방법이 코드 비동기 로딩입니다.

JS 함수, 객체, 컴포넌트를 처음에는 불러오지 않고, 필요한 시점에 불러 사용할 수 있습니다.

코드 비동기 로딩

일반적인 함수를 만들어서 불러서 사용해보겠습니다.

function.js

export default function notify() {
  alert("Hello World!");
}

App.js

import notify from "./script/function.js"
...
<button onClick={() => notify()}>noti</button>

이렇게 평소처럼 사용하던 코드가 있습니다.

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

상단에서 Import 하지 않고, import() 함수 형태로 메서드 안에서 사용하면, 파일을 따로 분리시켜서 저장하게 됩니다.

function App() {
  const onClick = () => {
    import("./script/function").then((module) => {
      module.default();
    });
  };
  <button onClick={() => onClick()}>noti</button>;
}

import 를 함수로 사용하면 Promise를 반환합니다.
이 함수를 통해 모듈을 불러올 때 모듈에서 defualt로 내보낸 것은 module.defualt()를 참조해 사용할 수 있습니다.

그리고 빌드를 하게 되면 새로운 main이 아닌 파일이 하나더 생성됩니다. 그리고 그 파일은 처음에 불러오는 것이 아니라 저 함수를 실행시킬 때 불러옵니다.

---

컴포넌트 코드 스플리팅

React.lazy

React.lazy 를 사용하면 컴포넌트를 코드 스플리팅을 할 수 있습니다.

React.lazy가 없을 때는 State로 컴포넌트를 선언한 후에, 그 값이 있는지 확인하고 가져와 사용했어야 했습니다.

하지만 그 과정이 귀찮기 떄문에, React.lazy를 사용해 state를 따로 선언하지 않고 코드 스플리팅이 가능합니다.

Suspense

Suspense는 코드 스플리팅된 컴포넌트를 로딩하면서 발동시킬 수 있고, 로딩이 끝나지 않았을 때 보여줄 UI를 설정할 수 있습니다.

const SplitMe = React.lazy(() => import("./SplitMe"));
const [visible, setVisible] = React.useState(false);

<React.Suspense fallback={<div>loading...</div>}>
  {visible && <SplitMe />}
</React.Suspense>;

코드를 이런식으로 적었습니다.
SplitMe가 나타나지 않을 떄는 js 파일을 불러오지 않고,
visible 이 될 때 , 불러오게 됩니다.

Loadable Components

SSR 렌더링을 지원하는 코드스플리팅 라이브러리 입니다.

사용법은 거의 비슷합니다. Suspense를 사용하지 않아도 됩니다.

const SplitMe = loadable(() => import("./SplitMe"));
{
  visible && <SplitMe />;
}

Suspense 처럼 로딩화면을 보고싶을 땐 아래와 같이 사용합니다.

const SplitMe = loadable(() => import("./SplitMe"), {
  fallback: <div>loading...</div>,
});