• 블로그 서비스에서는 페이지를 기준으로 코드를 분할하고 분할된 코드를 필요한 시점, 즉 페이지가 변경되는 시점에 로드하도록 했음. 이번에도 비슷함

번들 파일 분석

• 컴포넌트 지연 로딩 기법을 적용하기 전에 서비스에 어떤 문제가 있는지 파악하기 위해 번들 파일을 분석해 보자

yarn add -D cra-bundle-analyzer
npx cra-bundle-analyzer

• 하나씩 살펴보면 왼쪽의 static/js/2.1f42a8e6.chunk.js(이하 2.chunk.js) 블록은 node_modules에 있는 라이브러리 코드를 담고 있는 청크이고, 오른쪽 파란색 블록은 올림픽 통계 서비스의 코드임을 알 수 있음
• 그중 2.chunk.js의 내용을 보면, react-dom과 styled-components뿐만 아니라 react-image-gallery라는 라이브러리가 들어 있음. 그리고 이 라이브러리에 커서를 올려 두면 대략적인 사이즈가 26KB(Parsed Size) 정도임을 알 수 있는데, 사실 이 라이브러리는 서비스 첫 화면부터 필요하지는 않음. 이 라이브러리가 필요한 시점은 사진 갤러리가 있는 모달 창을 띄울 때임

• 조금이라도 효율적으로 사용하기 위해 이 라이브러리의 코드를 분할하고 지연 로딩을 적용해 보겠음

모달 코드 분리하기

1. App.js 파일에서 코드 분할과 지연 로딩을 위해 리액트 라이브러리의 Suspense 컴포넌트와 lazy 함수를 불러옴
2. 그런 다음 분할하고자 하는 컴포넌트인 ImageModal 컴포넌트를 import 함수와 함께 lazy 함수의 인자로 넘겨 줌
3. ImageModal이 로드되기 전에 발생하는 에러를 방지하기 위해, Suspense 컴포넌트로 LazyImageModal 컴포넌트를 감싸줘야 함

• 그리고 기존에 있던 ImageModal을 직접 import하는 구문은 주석으로 처리함
• 이때 react-image-gallery 라이브러리만 분할하지 않는 이유는 모달 컴포넌트도 첫 페이지 로딩 시 필요한 코드가 아니기 때문에 함께 묶어서 분할하는 것임
• 이렇게 하면 정적으로 import 되어서 번들 파일에 함께 포함되었던 ImageModel 컴포넌트와 그 안에서 사용되고 있는 react-image-gallery 라이브러리가 청크 파일에서 분리됨

import React, { useState, Suspense, lazy } from 'react'
//import ImageModal from './components/ImageModal'

const LazyImageModal = lazy(() => import('./components/ImageModal'));

function App() {
    const [showModal, setShowModal] = useState(false)

    return (
        <div className="App">
            <Suspense fallback={null}>
                <Header />
                <InfoTable />
                <ButtonModal onClick={() => { setShowModal(true) }}>올림픽 사진 보기</ButtonModal>
                <SurveyChart />
                <Footer />
                {showModal ? <LazyImageModal closeModal={() => { setShowModal(false) }} /> : null}
            </Suspense>
        </div>
    )
}