[React] Dynamic Import (동적 import)로 코드 스플리팅

SPA(Single Page Application)인 리액트는 webpack과 같은 번들러를 통해 모든 코드가 하나의 javascript 파일로 번들링 되어 로딩된다. 이에 따라 사용자가 첫 페이지 진입 시 불필요한 코드로 인해 로딩이 느리게 될 수 있다. 브라우저에서는 javascript 파일을 모두 불러올 때까지 렌더링을 멈추기 때문이다.

 

렌더링 속도를 높이기 위한 방법으로는 코드 스플리팅(코드 분할)이 있다. 필요한 시점에 필요한 코드를 불러옴으로써 첫 렌더링을 빠르게 할 수 있다.

 

코드 분할의 방법으로 dynamic import, 즉 동적 import에 대해 알아보겠다.

 

기본 Import

기본적으로 import 한다면, 불러온 라이브러리는 빌드 시 함께 번들링이 된다.

import { minus } from './math';

console.log(minus(5, 3));

 

동적 Import

동적으로 import한다면, 런타임시 필요한 라이브러리를 import 하여 로드한다.

promise를 반환하며, export 하는 객체를 내보낸다.

 

- then, catch

import("./math")
	.then(module => {
	    	const { minus } = module;
    	console.log(minus(5, 3));
	})
    .catch(err => console.error(err));

 

- async, await

export/export default의 경우에 따라 다르게 사용한다.

const getModule = async () => {
	const minus = await import("./math");
	console.log(minus(5, 3));
}

// default
const getModule = async () => {
	const minus = await import("./math");
	console.log(minus.default(5, 3));
}

 

webpack 설정

webpack에서 Dynamic 임포트를 사용하려면 babel-plugin-syntax-dynamic-import 플러그인이 필요하다.

빌드할 때, import() 모듈을 chunk 파일로 만든다.

이후 필요한 시점에 header에 script를 세팅하며 javscript 파일을 다운로드한다.

 

yarn add @babel/plugin-syntax-dynamic-import

 

chunk 파일명은 webpack 설정에서 지정할 수 있다.

module.exports = {
  output: {
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
  },
}

 

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

코드 분할 – React

https://classic.yarnpkg.com/en/package/@babel/plugin-syntax-dynamic-import

@babel/plugin-syntax-dynamic-import

 

 

React의 Suspense와 lazy 기능은 16.6 버전 이상부터 사용할 수 있다.

해당 기능은 다음에 알아보겠다!