웹 최적화 기법 - 코드 분할 (Splitting)

리액트의 SPA의 특성 상 모든 리액트 코드가 하나의 자바스크립트 파일로 번들링 되어 로드되므로 첫 페이지 진입 시 사용하지 않는 코드가 다소 포함되어 있다.

 

코드를 분할하고 → 하나의 번들 파일을 → 여러 개의 파일로 쪼개기

분할된 코드는 사용자가 서비스를 이용하는 도중 해당 코드가 필요할 때 로드되어 실행되게끔 지연로딩 처리 해준다.

 

• 코드 분할 후 컴포넌트 지연 로딩
  • 동적 import 사용하기

  import { add } from './math'; //X
  
  import('add').then((module) => {
  	const { add } = module; //O
  });

  • 동적 import 의 경우에는 Promise 형태로 모듈을 반환하므로 사용이 용이하지 않는데, 리액트에선 해당 기능을 lazy와 Suspense 를 제공한다.

  import { Suspense } from 'react';
  
  const ExCompo = React.lazy(() => import('./stm');
  
  export function App() {
  	return (
  		<Suspense fallback={<div>loading</div>}>
  			<ExCompo />
  		</Suspense>
  	);
  }

  • lazy 함수는 동적 import 를 호출하여 그 결과 Promise를 반환하는 함수를 인자로 받는다. lazy로 import 한 컴포넌트는 Suspense 안에서 렌더링 처리해줘서 사용한다.
  • 페이지별로 코드분할을 하려면 Router 안에서 lazy와 Suspense 를 사용하여 지연 로딩을 실시한다.