모듈 미리 로드

Sérgio Gomes
X

모듈 기반 개발은 캐시 가능성 측면에서 몇 가지 실질적인 이점을 제공합니다. 사용자에게 제공해야 하는 바이트 수를 줄이는 데 도움이 됩니다. 코드가 세분화되어 있으면 우선순위를 지정할 수 있습니다.

그러나 모듈 종속 항목이 로드 문제를 일으킬 수 있는데, 브라우저에서 모듈이 로드될 때까지 기다린 후에 종속 항목이 무엇인지 알아낼 수 있습니다. 편도 종속 항목을 미리 로드하여 브라우저가 연결을 바쁘게 할 수 있습니다.

<link rel="preload"> 드림 는 사전에 리소스를 선언적으로 요청하는 방법입니다. 필요한 시점이 되기 때문입니다.

<head>
  <link rel="preload" as="style" href="critical-styles.css">
  <link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">
</head>

브라우저 지원

  • Chrome: 50. <ph type="x-smartling-placeholder">
  • 에지: ≤ 79. <ph type="x-smartling-placeholder">
  • Firefox: 85 <ph type="x-smartling-placeholder">
  • Safari: 11.1. <ph type="x-smartling-placeholder">

소스

이는 글꼴과 같은 리소스에 특히 잘 작동하며, 글꼴과 같은 리소스는 때로는 몇 수준 깊이까지 존재할 수 있습니다. 이 경우 브라우저가 여러 번의 왕복을 기다려야 한다는 것을 알기 전에 큰 글꼴 파일 가져오기(해당 시간에 다운로드를 시작할 수 있는 경우) 전체 연결 대역폭을 활용할 수 있습니다.

<link rel="preload"> 및 이에 상응하는 HTTP 헤더는 간단한 선언적 브라우저에 중요한 파일에 대해 즉시 알릴 수 있는 방법이 있습니다. 현재 탐색의 일부로 추가할 수 있습니다. 브라우저에서 미리 로드를 확인하면 리소스에 대한 우선 순위를 다운로드하므로 실제로 필요할 때면 가져올 수 있습니다 그러나 모듈에 대해서는 작동하지 않습니다.

이 부분에서 문제가 발생하기 쉽습니다. 사용자 인증 정보 모드에는 캐시 적중을 얻기 위해서는 리소스 리소스가 일치해야 하며, 그렇지 않으면 리소스를 두 번 가져옵니다. 당연히 더블 가져오기는 사용자의 대역폭을 낭비하고 합당한 이유 없이 더 오래 기다리게 합니다.

<script> 및 <link> 태그의 경우 crossorigin를 사용하여 사용자 인증 정보 모드를 설정할 수 있습니다. 속성의 값을 제공합니다. 하지만 값이 없는 <script type="module">는 crossorigin 속성은 존재하지 않는 omit의 사용자 인증 정보 모드를 나타냅니다. (<link rel="preload">) 다시 말해서 <script>와 <link>에서 모두 crossorigin 속성을 하나로 변경합니다. 다른 값을 사용하고 있는지 확인해야 하며 다른 모듈의 종속 항목입니다.

또한, 파일 가져오기는 실제로 코드를 실행하는 첫 번째 단계일 뿐입니다. 먼저 브라우저가 이를 파싱하고 컴파일해야 합니다. 이상적으로는 이 역시 미리 이루어져야 하므로 모듈이 필요할 때 코드가 실행할 준비가 되었습니다. 그러나 V8 (Chrome의 JavaScript 엔진)은 다른 자바스크립트와 다르게 작동합니다. <link rel="preload">에서 실행하지 않음 로드 중인 파일이 모듈임을 나타내는 방법을 제공하므로 모든 브라우저는 파일을 로드하여 캐시에 넣는 것입니다. 스크립트가 로드되면 <script type="module"> 태그 (또는 다른 모듈에 의해 로드됨)로 인해 브라우저가 코드를 JavaScript 모듈로 컴파일합니다.

간단히 말하자면 그렇습니다. 모듈 미리 로드에 특정 link 유형을 사용하면 사용하는 인증 모드에 대해 걱정할 필요 없이 간단한 HTML을 작성할 수 있습니다. 이 기본값은 잘 작동합니다

<head>
  <link rel="modulepreload" href="super-critical-stuff.mjs">
</head>
[...]
<script type="module" src="super-critical-stuff.mjs">

그리고 이제 브라우저가 미리 로드하는 것이 모듈임을 인식하므로 가져오기가 완료되는 즉시 모듈을 파싱하고 컴파일합니다. 가상 머신을 실행하려고 할 때 사용할 수 있습니다

브라우저 지원

  • Chrome: 66 <ph type="x-smartling-placeholder">
  • 에지: ≤ 79. <ph type="x-smartling-placeholder">
  • Firefox: 115 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

소스

하지만 모듈의 경우 어떻게 해야 할까요?

이상하네요! 이 문서에서 다루지 않은 것은 반복입니다.

<link rel="modulepreload"> 사양은 실제로 모든 종속 항목 트리도 포함됩니다. 브라우저가 하지만 할 수 있습니다.

그렇다면 모듈을 미리 로드하기 위한 최고의 교차 브라우저 솔루션은 무엇일까요? 앱을 실행하려면 전체 종속 항목 트리가 필요하므로 어떻게 해야 할까요?

종속 항목을 재귀적으로 미리 로드하도록 선택하는 브라우저는 강력한 중복 삭제 기능을 갖추고 있어야 합니다. 따라서 일반적으로 모듈과 플랫 목록을 선언하는 것이 좋습니다. 브라우저가 같은 모듈을 두 번 가져오지 않도록 신뢰해야 합니다.

<head>
  <!-- dog.js imports dog-head.js, which in turn imports
       dog-head-mouth.js, which imports dog-head-mouth-tongue.js. -->
  <link rel="modulepreload" href="dog-head-mouth-tongue.mjs">
  <link rel="modulepreload" href="dog-head-mouth.mjs">
  <link rel="modulepreload" href="dog-head.mjs">
  <link rel="modulepreload" href="dog.mjs">
</head>

모듈을 미리 로드하면 성능에 도움이 되나요?

미리 로드는 브라우저에 어떤 항목이 있는지 알려 주므로 대역폭 사용을 극대화하는 데 도움이 될 수 있습니다. 긴 왕복 동안 할 일로 갇히지 않도록 가져와야 합니다. 모듈을 실험하는 중에 심층적인 모듈 구성으로 인해 성능 문제가 발생하는 경우 미리 로드의 평면 목록을 만들면 확실히 도움이 될 수 있습니다.

즉, 모듈 성능은 아직 작업 중이므로 개발자 도구를 사용하여 애플리케이션에서 어떤 일이 일어나고 있는지 자세히 살펴보고, 그동안 애플리케이션을 여러 청크로 묶는 것이 좋습니다. 생성형 AI는 지속적으로 모듈 작업을 진행 중이기 때문에 Google Cloud는 푹 쉬고 있네!