8편 pre Loading Component, Image

8편 pre Loading Component, Image

6편인가에서 Bundler의 특징으로 여러개의 파일을 하나로 압축해서 가져오는 것을 예방하기 위한 Code Splitting을 해주었다. 

 

그래서 split된 파일을 필요할 때 가져오는 방식을 사용했습니다. 이번 글에서는 이러한 과정 속에 필요할 때가 아닌 현재 필요한 파일을 다 가져오는 로딩이 다 끝난 후 splitting 된 파일을 가져와 Cache에 담아두는 Pre loading을 해보겠습니다. 

 

Pre loading Component

React를 Pre loading하기 위해서는 Pre Loading할 컴포넌트를 미리 import하면 된다. 

 

1. React Component를 lazy로 불러올 수 있는 객체를 만들어줄 수 있는 함수를 만들어줍니다.

const lazyWithPreload = (importFunction) => {
    const Component = React.lazy(importFunction)
    Component.preload = importFunction
    return Component
}

 

2. useEffect를 사용해서 로딩된 처음에 실행해서 import한 컴포넌트를 불러와 cache에 저장해준다.

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

처음 불러올 때는 조금의 시간이 걸리는 것을 알 수 있다.

 

Cache에 저장 후 불러올 때

 

용량이 203byte 시간 또한 조금 단축된 것을 볼 수 있다.

 

Image Preloading

이번에는 컴포넌트가 아닌 image를 Pre Loading 하는 방법에 대해 알아보겠다. image를 pre Loading 하기 위해서는 Image 객체를 만들어준 후 src에 등록해주면 자동으로 이미지를 불러오게 되는데 불러오면서 자동으로 cache에 저장되게 된다. 

 

js에서 new Image 라는 객체를 만들어주면 html의 <img>를 불러오는 것을 알 수 있다.  Image의 객체에 .src로 들고오려는 이미지를 등록해주면 그 이미지를 network tab에서 불러오는 것을 알 수 있다. 

 

image.src에 값을 넣어주면 위와 같이 해당 파일을 network에서 불러오는 것을 알 수 있다. 

 

그리고 해당 이미지의 Response Header의 값을 확인해보면 Cache Control을 통해서 cache에 856초 동안 걸려있구나 라는 것을 알 수 있다. 

 

그래서 이 기능을 사용해서 js 코드 상에서 미리 .src를 통해 불러오는 방식으로 코드를 작성했습니다.

useEffect(() => {
        LazyImageModal.preload();
        images.map(image => {
            const img = new Image()
            img.src = image.original
            img.src = image.thumbnail
        })
    }, [])

 

pre Loading cache 적용 전

 

pre Loading cache 적용 후

 

적용 전과 적용 후를 비교해보면 이미지를 가져오는 속도차이가 엄청난 것을 확인할 수 있다. 캐시 적용후에는 3ms ~ 7ms의 속도가 걸리는 것을 알 수 있다.