컴포넌트 Preload

yoeubi
2 min readAug 27, 2020
출처: https://www.machmetrics.com/speed-blog/guide-to-browser-hints-preload-preconnect-prefetch/

웹 사이트가 복잡해짐에 따라 번들 파일 사이즈가 커지고 있습니다.

이런 현상때문에 웹 사이트 로딩 속도가 느려졌는데요

이걸 극복하기 위해 지연 로딩(Lazy loading)이라는 기술을 사용하게 되었습니다.

하지만 지연 로딩에도 단점이 있습니다.

Lazy Loading의 단점

컴포넌트를 지연로딩을 하면 불러오기까지 딜레이가 발생합니다.

리소스를 요청하고 다운받은 후에 평가가 되야지 컴포넌트가 보여집니다.

이러한 딜레이를 줄이기 위해서는 미리 컴포넌트를 불러오면 해결할수 있습니다.

컴포넌트 Preload 타이밍

미리 컴포넌트를 불러오는 타이밍은 파일 사이즈에 따라 다를 수 있습니다.

만약 파일 사이즈가 크다면 최초 페이지가 로드가 됐을때 불러오거나

어떤 마우스 동작이 실행하기전에 불러오는 방법이 있습니다.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

yoeubi
yoeubi

Written by yoeubi

Junior Frontend engineer

No responses yet

Write a response