prefetch, preload

- prefetch

<link rel="prefetch" href="/pages/next-page.html"> // HTML에서 선언해주기
Link: </js/chat-widget.js>; rel=prefetch // HTTP Header에서 선언해주기
const EmojiPicker = import(/* webpackPrefetch: true */ "./EmojiPicker"); // webpack에 prefetch할거라고 알려주기

연관된 경로 혹은 페이지에서 필요할 수 있는 리소스를 미리 fetch 할 수 있게 해주는 브라우저 최적화.
어떤 버튼을 누르면 컴포넌트가 나타난다고 가정할 때, 해당 컴포넌트는 script의 loading -> parsing -> compiling -> executing 총 4가지 단계를 거쳐야 사용자에게 보인다. 따라서 버튼을 눌러도 컴포넌트가 잠깐 안보일 수도 있다.
버튼을 눌러야 컴포넌트가 나타날 것이기 때문에 해당 컴포넌트를 초기 번들에 포함시키는 것은 불필요하게 초기 번들의 크기를 늘리는 것일 수 있다. 하지만 더 나은 사용자 경험을 위해 로드 시간을 최대한 줄이고 싶다면...? 바로 prefatch를 사용하면 된다!

prefetch가 적용된 모듈은 사용자가 리소스를 요청하기 전에 브라우저에서 미리 요청하고 로드를 한다.
브라우저가 판단하기에 충분한 대역폭이 있고, 작업을 할 여유가 있다면 해당 리소스를 로드하고 캐시하기 위해 미리 요청을한다.
이렇게 리소스가 브러우저에 캐시되면 사용자가 리소스를 요청할 때 그냥 캐시된 것을 꺼내주면 되기 때문에 로딩 시간이 줄어든다.

- preload

<link rel="preload" href="emoji-picker.js" as="script">
const EmojiPicker = import(/* webpackPreload: true */ "./EmojiPicker"); // webpack에 알려주기

preload는 늦게 발견될 수도 있는 중요한 리소스를 더 일찍 요청할 수 있게 해주는 브라우저 최적화이다.
이 때 preload 로 선언된 리소스는 초기 번들과 병렬로 로드할 수 있다. 
prefetch가 걸린 리소스는 충분한 대역폭 등의 조건을 브라우저가 판단한 후 로드되고,
preload 가 걸린 리소스는 무조건 미리 로드된다!

한 편, 브라우저가 스크립트를 높은 우선 순위로 다운로드하기를 원하지만 파서를 차단하지 않으려면 preload 와 async를 섞어 쓸 수 있다. 다만 이 때 preload가 걸린 리소스를 먼저 받아오기 때문에 다른 리소스의 다운로드가 지연될 수 있다.

<link rel="preload" href="emoji-picker.js" as="script">
<script src="emoji-picker.js" async>

 

참고문서
https://www.patterns.dev/posts/prefetch/

https://www.patterns.dev/posts/preload/

https://developer.mozilla.org/en-US/docs/Glossary/Prefetch