[펌] 되돌아보는 index.html - Part 1

https://so-so.dev/web/index-html-1/

React, Vue, Angular 같은 Library 혹은 Framework로 개발할 경우 빌드 결과물인 index.html은 자동으로 생성되기 때문에 직접 볼 필요가 없을 수도 있습니다.

하지만, 최종 html의 구성 요소를 잘 파악하고 있다면 성능 개선이나 디버깅하는 상황에서 용이하게 활용할 수 있습니다.

Parts

1편: link, script tag

2편: meta tag(Open Graph), lang 등

TL;DR

link tag

preload: 현재 화면에 필요한 리소스=

prefetch: 현재 화면에 필요한 것❌, 이후 페이지에 필요한 리소스

preconnect: 같은 도메인에 여러개의 리소스를 요청할 때

script tag

async: DOM 제어와 관련 없는 스크립트

defer: DOM 제어와 관련 있는 스크립트

SPA의 bundle.js에 대해서는 요청 시간 단축 효과를 기대하기 어려울 수 있음