Icon could not be loaded
浏览器中的模块预加载
Icon could not be loaded
2 min read
#writings#FE#W3C

模块脚本默认以defer方式加载，这在大多数时候都不会造成问题。但模块的依赖项可能带来加载问题，因为浏览器需要等待模块加载才能找到其依赖项。解决该问题的一种方法是预加载依赖项。

浏览器提供了提前声明请求资源的方式：<link rel="preload">，这对于字体、媒体文件等资源非常有效。<link rel="preload"> 及其等效的 HTTP 标头提供了一种简单的声明性方式，让浏览器立即了解当前导航所需的关键文件，对资源进行高优先级下载，当该资源被实际需要时已被获取或部分获取。

如下例子来自MDN。 某网站文件目录如下：

index.html
main.js
modules/
    canvas.js
    square.js

其中main.js加载了canvas和square模块：

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <style>
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

当文档解析完成后，开始加载、执行main.js，执行过程中发现依赖项canvas.js和square.js需要获取它们。

如果改造为如下形式，当解析HTML到modulepreload，会异步并行预加载对应模块，当执行main.js时该文件已被parsed且他的依赖项是已知的。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <link rel="modulepreload" href="main.js" />
    <link rel="modulepreload" href="modules/canvas.js" />
    <link rel="modulepreload" href="modules/square.js" />
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

浏览器兼容性列表： image.png