코드 스플리팅

요약

• 코드 베이스를 여러 개의 작은 청크로 분리하여 필요한 시점에만 로드되도록 하는 기법

내용

• 애플리케이션의 코드 베이스를 여러 개의 작은 청크로 분리하여 필요한 시점에만 로드되도록 하는 기법이다.
• 이를 통해 초기 로딩 시간 단축하고, 애플리케이션의 성능을 향상 시킬 수 있다.
• 동적 import를 사용하여 런타임시 필요한 모듈을 불러오게 하는 코드 분할, 코드 스플리팅이라고 한다.
• 예시는 다음과 같다.

import React, { useState } from 'react';
 
const MyComponent = () => {
  const [Component, setComponent] = useState(null);
 
  const loadComponent = async () => {
    const { default: LoadedComponent } = await import('../components/YourComponent');
    setComponent(() => LoadedComponent);
  };
 
  return (
    <div>
      <button onClick={loadComponent}>Load Component</button>
      {Component && <Component />}
    </div>
  );
};
 
export default MyComponent;
 

참고

• https://www.nextree.io/code-splitting/