브라우저가 리소스를 프리페치(prefetch)하게 하기
·
🎨 프론트엔드 공부/기타
📌Prefetch 개요- Prefetch(예: )는 브라우저 최적화 방법 중 하나로, 후속 경로 또는 페이지에 필요할 수 있는 리소스를 미리 가져오는 것이다- 아래 처럼 HTML에서 직접 선언적으로 작성할 수도 있고 - HTTP 헤더를 이용하거나Link: ; rel=prefetch - Webpack이나 서비스 워커를 이용하는 방법 등이 있다 📌Prefetch를 고려해야할 때- 가시성 또는 상호작용 기반으로 모듈을 페칭하고 있는데, 컴포넌트 렌더링을 트리거했는데, 지연이 발생할 때(예: 이모티콘 입력 버튼을 눌러 이모티콘 입력창을 띄우려고 하는데, 로딩이 느릴 때)- 최초에 사용자에게 보여지는 UI 영역이 아니라서 동적 import해서 초기 번들에서 제외하여 최초 로딩 속도를 올리는 장점을 취하면서도..