dynamic import (lazy loading, code Splitting)

 

웹페이지 최적화하기 위해서 하는 방법 중에 하나인 Lazy Loading. 중요하지 않은 리소스를 식별하고 필요할 때만 로드하는 전략으로 페이지 리소스를 줄여 페이지 로드 시간이 단축된다.

 

Lazy Loading이란?

https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

Lazy loading - Web performance | MDN

 

웹사이트 속도를 향상 시키기 위해서는 1. 불필요한 코드를 줄이는(Tree Shaking라고 부른다)  방법과 2. 코드를 분할하는 방법이 있다. 불필요한 코드를 줄이기 위해서는 웹팩을 이용해서 렌더링 과정에서 필요없는 코드를 제거하는 방법인 Minify (압축)를 할 수 있으며, 코드 분할(Code Splitting) 역시 웹팩을 통해서 Chunk(조각) 쪼개어 나눌 수 있는 방법이 있다.

 

Dynamic Import

그중 Dynamic Import(동적 불러오기=가져오기 를 통한 코드 분할) 알아보자.

일반 가져오기(import) 모듈과 달리 동적 가져오기(dynamic import)는 로드 시기와 방법에 대해 유연합니다. 읽을 때 모듈 파일을 모두 로드하는 대신 사용 시 동적 가져오기를 요청할 수 있습니다. 모듈을 별도의 번들 파일로 코드 분할하여 개별적으로 가져올 수 있으므로 초기 페이지 로드가 줄어듭니다. Next.js는 ES2020의 Dynamic import를 지원하며, 리액트 역시 React.lazy, React.Suspence를 통해서 지원한다. 필자는 Next.js 사용함으로써, Next.js 환경에서 우선 예시화면을 보여주고자 한다. 사용방법은 각 공식문서에서 참조하자.

 

Next.js dynamic import

https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading

Optimizing: Lazy Loading | Next.js

리액트 코드분할

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

Code-Splitting – React

 

첫 번째로는 빌드시 용량비교 전후를 비교한 화면이고, 두번째에서는 브라우저에서 Dynamic Import 작동하는 방법이다. 비교를 위해서 Layout 컴포넌트에서 footer나 Menu 컴포넌트를 dynamic import를 불러와보았다. 화면에서 보면 알 수 있겠지만, 조금씩 용량이 줄어든 것을 확인할 수 있다. 두 번째 화면에서는 Dynamic Import가 브라우저에서 어떻게 작용하느냐인데, 자바스크립트를 Chunk를 쪼개어 해당 컴포넌트가 로딩될 때 마저 불러오는 것을 확인할 수 있다.

빌드

Dynamic Import before 

Dynamic Import After

 

브라우저 네트워트크

첫 화면

동적 가져오기 브라우저 네트워크

아래로 스크롤

아래로 스크롤시

그럼 Dynamic Import 언제 사용하면 좋은가?

1. 상호 작용이 발생할 때까지 콘텐츠를 표시하지 않는 모달 및 토글과 같은 UI 구성 요소
2. 특정 형태의 텍스트 입력 또는 버튼 클릭에 의존하는 검색 구성 요소
3. 사용자 상호 작용에 추가 콘텐츠를 렌더링하는 "더 보기" 구성 요소
4. 외부 API의 모듈 쿼리
5. 로드 속도가 느리고 가져오기가 해결되는 동안 로드 구성 요소의 이점을 얻을 수 있는 구성 요소

참조

https://webdevstudios.com/2021/01/21/how-to-use-dynamic-imports-in-next-js/

How to Use Dynamic Imports in Next.js