我們之前提及過link rel 里面有preload和prefetch、modulepreload，都是用於預加載資源
<link rel="preload" href="..." as="..."> <link rel="modulepreload" href="..."> <link rel="prefetch" href="...">
注意preload需要寫上正確的as屬性，才能正常工作喔(prefetch不需要)。
1. 但是preload和prefetch有什么區別呢？
我們翻看w3c的preload規范，里面有提及：
大致意思就是：
preload是用於預加載當前頁的資源，瀏覽器會優先加載它們
prefetch是用於預加載后續導航使用的資源，瀏覽器也會加載它們，但優先級不高
補充：
值得注意的是preload的as如果是video，現在瀏覽器還是沒有支持，可以改用as=“fetch”替代 或者 video本身的preload="auto"屬性代替
<!-- video的preload --> <video src="..." controls="controls" preload="auto"></video> <!-- link的preload，as不要寫video，因為瀏覽器還沒有支持 --> <link rel="preload" as="fetch" href="..."> <video src="..." controls="controls"></video>
2. modulepreload和preload
既然有了preload，為什么還有新增一個modulepreload呢？
我們看到developers.google.com有一篇文章專門介紹modulepreload，里面有一段專門的解釋：
大概意思是說，使用link preload來預加載JavaScript Module會有2個問題：
1. 預加載如果是跨域並需要開啟credentials模式(跨域帶cookies)，會遇到一些麻煩（具體什么麻煩，沒太看懂😭）
2. preload沒有屬性可以提供來辨別這個js資源是一個JavaScript Module，這讓瀏覽器沒辦法預加載完后馬上處理成JavaScript Module來備用，只能等到調用的時候再處理
modulepreload更多詳情：查看