[Next.js] dynamic import를 사용한 퍼포먼스 향상

김창회·2020년 12월 31일
2
post-thumbnail

Dynamic Import?

Next.js는 dynamic이라는 ES2020 최신 문법을 지원하고 있습니다.
dynamic Import란 간단히 말해 앱의 빌드 과정에서 모듈을 불러오는 것이 아니라 런타임때 모듈을 불러옴으로써, 처음 불러오는 파일들의 용량을 줄이고 결과적으론 퍼포먼스적 향상을 이루게 하는 최적화 방법입니다.

웹 사이트의 속도를 결정 짓는건 페이지가 처음 로딩되는 속도라는 말이 있는데
바로 Dynamic Import가 그런 기능을 하는 셈인 것이죠👍

Next에서는 다음과 같은 코드로 dynamic Import를 간단하게 구현할 수 있습니다.

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components'))

const Dynamic = () => {
	return <DynamicComponent />
}

Example

실제 프로젝트에서 사용한다면 어느정도 최적화가 진행될까요?
진행하고 있는 개인 프로젝트에서 dynamic 기능을 사용해 봤습니다.

dynamic Import를 적용하기 전 파일들의 용량은 빨간색 잔치네요😅

다음은 dynamic Import를 사용한 결과입니다.

첫 로딩되는 js파일의 크기가 작게는 30kb에서 많게는 7~80kb까지 줄어드는걸 확인할 수 있었습니다. 프로젝트의 규모가 커질 수록 성능 최적화에 대한 고민이 있을 수 밖에 없는데 dynamic Import를 적절히 사용한다면 간단하게 퍼포먼스적 향상을 이뤄낼 수 있을 것 같습니다😎

profile
프론트엔드 개발자

0개의 댓글