HTML Academy · 강의

리소스 힌트 modulepreload

ES 모듈을 미리 로드해 JavaScript 시작 속도 높이기

리소스 힌트 modulepreload은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

modulepreload이 필요한 이유

ES 모듈은 의존성 그래프를 구성합니다. 진입 모듈이 다른 모듈을 가져오고, 그 모듈이 더 많은 모듈을 가져옵니다. 도움 없이는 트리의 각 단계가 이전 단계가 구문 분석된 후에야 발견되므로 순차적인 워터폴이 발생해 로드 성능을 크게 저하시킵니다.

modulepreload의 기능

<link rel="modulepreload" href="/app.js">는 모듈 AND 그 모듈이 전이적으로 가져오는 모듈을 즉시 병렬로 가져오도록 브라우저에 지시합니다. <script type="module">이 실행될 때쯤에는 전체 그래프가 이미 캐시에 저장되어 있습니다.

preload와 비교

preload도 파일을 병렬로 가져오지만 가져오기 문을 인식하지 못합니다. 모듈 파일을 preload해도 해당 의존 모듈까지 preload되지는 않습니다. modulepreload은 가져오기를 자동으로 따라가며, 이것이 바로 modulepreload의 핵심 목적입니다.

<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>

배치 위치

<head> 안에서 가능한 한 앞쪽에 배치하십시오. 브라우저는 즉시 preload 요청을 시작하면서 HTML 구문 분석을 계속합니다. 문서 뒤쪽에서 일치하는 <script type="module">을 만날 때쯤이면 파일이 이미 메모리에 올라와 있습니다.

발견과 그래프 탐색

브라우저는 preload된 모듈을 구문 분석하면서 가져오기 문을 찾은 다음, 가져온 각 URL을 재귀적으로 병렬 요청합니다. 각 단계마다 한 번 왕복하는 비용은 발생하지만 단계 내부에서는 병렬성을 얻으므로 주요 경로가 크게 짧아집니다.

번들러와 함께 사용하기

최신 번들러(Vite, Rollup, Webpack 5 이상)는 코드 분할 청크에 대한 modulepreload 태그를 자동으로 생성합니다. 직접 구성한 애플리케이션에서는 빌드 시 가져오기 그래프에서 태그를 생성하십시오. 그래야 모듈이 추가되거나 제거되어도 목록이 정확하게 유지됩니다.

CrossOrigin 고려 사항

출처가 다른 모듈을 preload할 때는 crossorigin="anonymous"를 포함하십시오. 이렇게 하면 <script type="module">의 기본 가져오기 모드와 일치하므로, CORS 헤더 없이 다시 가져오는 대신 preload된 사본을 재사용할 수 있습니다.

브라우저 지원

modulepreload은 Chrome/Edge/Safari와 최신 Firefox에서 지원됩니다. 구형 Firefox에서는 조용히 무시되지만 모듈 자체는 정상적으로 작동하며 preload의 이점만 얻지 못합니다. 폴리필은 필요하지 않습니다. 최악의 경우 오래된 브라우저에서 로드가 조금 느려질 뿐입니다.

그래프 크기 제한하기

사용자가 실행하지 않을 수도 있는 코드에 수백 개의 모듈을 preload하면 대역폭이 낭비됩니다. 깊은 단계에서 지연 로드되는 모듈이 아니라 경로 수준의 진입 청크만 preload하십시오. 드물게 사용되는 코드 경로에는 prefetch(또는 필요할 때 가져오기)를 사용하십시오.

다른 힌트와 결합하기

같은 head에 이미지와 글꼴이 있어도 자유롭게 함께 사용하십시오. 서드파티 CDN에는 preconnect를, 중요한 글꼴에는 preload를, 진입 모듈에는 modulepreload을, 다음 페이지의 자산에는 prefetch를 사용하면 됩니다. 이러한 힌트는 서로 간섭하지 않습니다.

확인

네트워크 패널을 확인하십시오. modulepreload을 사용하면 두 번째 단계의 가져오기가 진입 모듈과 거의 동시에 시작되는 병렬 요청으로 표시됩니다. 사용하지 않으면 각 요청이 부모 모듈의 구문 분석이 끝난 뒤에야 시작되어 계단식으로 표시됩니다.

지식 확인

같은 모듈 파일을 일반 preload하는 것과 달리 modulepreload은 무엇을 해 주나요?

요약

modulepreload은 실행 전에 진입 모듈과 해당 모듈의 가져오기를 병렬로 가져와 ES 모듈 워터폴을 제거합니다. <head> 앞부분에 배치하고, 빌드 그래프에서 생성하며, 출처가 다른 모듈에는 crossorigin을 설정하십시오. 대역폭 낭비를 막으려면 범위를 경로 진입점으로 제한해야 합니다.

자주 묻는 질문

“리소스 힌트 modulepreload” 강의는 무료인가요?

네 — “리소스 힌트 modulepreload” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“리소스 힌트 modulepreload”에서 뭘 배우나요?

ES 모듈을 미리 로드해 JavaScript 시작 속도 높이기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“리소스 힌트 modulepreload” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기