성능 최적화하기 - (5) 프리로딩(Preloading)

◽ Preload이란

필요한 리소스 자원을 서버에 요청할 때 여러자원을 동시에 요청하게 되고, 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다. 이때 우선순위를 부여하여 특정 리소스를 빠르게 로딩하도록 하는 것이 바로 preload이다.

 

 

◽ Preload 타이밍

1. 버튼 위에 마우스를 올려놨을 때

2. 최초페이지 로드 후 모든 컴포넌트의 마운트가 끝났을 때

모달 코드를 미리 로드한다.

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

    // 화면이 렌더링 된 후 특정함수를 실행하는 hook
    // 미리 import하여 화면이 미리 렌더링 될 수 있도록 한다.
    useEffect(() => {
      const Component = import('./components/ImageModal')
    }, [])

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

function lazyWithPreload(importFunction) {
  const Component = React.lazy(importFunction)
  // preload라는 키로 함수를 지정하여 호출한다.
  Component.preload = importFunction
  return Component
}

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

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

    useEffect(() => {
      LazyImageModal.preload()
    }, [])

    // const handleMouseEnter = () => {
    //     const Component = import('./components/ImageModal')
    // }

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

 

 

 

◽ 이미지 preload

useEffect 같이 모두 마운트 된 이후에 실행되는 hook을 지정하여 이미지를 미리 다운로드하는 함수를 실행한다.

useEffect(() => {
    const img = new Image()
    img.src = "https://stillmed.olympic.org/media/Photos/2016/08/20/part-1/20-08-2016-Football-Men-01.jpg?interpolation=lanczos-none&resize=*:800"
}, [])

 

(memory cache)

(disk cache)

 

 

cache-control 항목에서 max-age를 확인할 수 있다.

ex) max-age=1625 (=1625초 동안 캐시가 적용)

 

 

---

 

 

출처

Preload의 개념, 그리고 올바른 사용법

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1 - 인프런 | 강의