코드 스플리팅

 

 

코드 스플리팅

 

 

: 빌드-번들링(하나로 압축) 시 파일을 분리하는 작업 

 

어플리케이션 크기가 커지면 번들 파일도 커짐

이때 스플리팅을 통해 큰 파일을 맞닥뜨리는 문제점을 해결할 수 있음

 

 

 

예를 들어

 

 

react 에서 구현한 페이지가 main / login / about 로 이루어진 spa를 구현한다고 했을 때

main 페이지를 들어가는 동안 다른 페이지 정보는 사용자에게 필요하지 않음

 

이때 웹팩은 동기적으로 로드하기 위한 청크 파일을 만듦

그리고 login 모듈이 필요한 상황이 발생하면 청크 파일을 비동기적으로 로드하여 login 모듈을 사용할 수 있도록 함

 

 

즉,

코드 스플리팅을 사용하면

필요한 모듈만 로드하기 때문에 초기 로딩 시간이 줄어들고 애플리케이션 성능이 개선됨

 

 

---

 

자동 코드 스플리팅

 

 

next.js 나 cra가 자동 코드 스플리팅을 지원함

 

 

👇 이렇게

// before
import { add } from './math';
console.log(add(16, 26));

// after
import("./math").then(math => {
  console.log(math.add(16, 26));
});

 

 

자동적으로 된다는 게 지원을 해준다는 건지 빌드시에 알아서 바꾸어준다는 건지 궁금해서

chatGPT에 물어봤는데

 

 

 

 

next.js, cra 는 알아서 바꾸어준다고 한다

 

---

 

React 에서 지원하는 코드 스플리팅

 

React.lazy  / suspense

 

//Before

import OtherComponent from './OtherComponent';


//After

const OtherComponent = React.lazy(() => import('./OtherComponent'));

 

👆 이렇게 하면 이 구성 요소가 처음 렌더링 될 때 포함된 번들을 자동으로 로드함

 

 

 

 

+

 

이를 이용하여 페이지가 변할 때 suspense 를 사용하여 로딩 페이지를 띄울 수 있음

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

 

 

 

이렇게 감싸면 모든 페이지가 변할 때마다 로딩 페이지가 뜸

 

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

 

 

 

 

 

 

 

 

참고 출처 :

https://legacy.reactjs.org/docs/code-splitting.html

https://velog.io/@sjpark960520/%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%AC%ED%8C%85Code-Splitting%EA%B3%BC-React.lazy

https://devowen.com/342