如何使预取链接与 JavaScript 文件一起使用？答案

【问题标题】：How to make prefetch link work with JavaScript file?如何使预取链接与 JavaScript 文件一起使用？
【发布时间】：2021-07-04 22:27:23
【问题描述】：

我正在尝试对 html 页面中的 JavaScript 资源使用预取（通过带有 rel="prefetch" 的链接）。在 Chrome 中，我看到预取请求以“javascript”的“类型”开始。如果我随后尝试通过将脚本标记插入页面来获取相同的 JavaScript 资源，我希望这是从浏览器缓存中获取的，而不是触发新请求以从 CDN 获取资源。然而，这种情况并非如此。我看到使用“脚本”的“类型”发出了一个新请求。我假设问题与此请求和预取请求之间的类型不匹配有关。

有没有办法强制预取请求使用某种类型的脚本或其他方式来避免再次获取 JavaScript 文件？

我尝试使用“脚本”的“as”属性值，但这似乎没有效果。

我知道 rel="preload" 是另一种选择。这可行，但通常的建议似乎是预加载仅适用于您将要使用的资源，而预取是您在网页中导航后将使用的资源的更好选择。如果您使用预加载并且在几秒钟内未使用该资源，Chrome 也会发出警告。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <link rel="prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-cookies.js" />
    <script type="text/javascript">
        setTimeout(function() {
             const scriptElement = document.createElement("script");
             scriptElement.src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-cookies.js";
             document.head.appendChild(scriptElement);
         }, 2000);
    </script>
</head>
<body>
</body>
</html>

请参阅上面的示例重现代码。我希望 setTimeout 中的脚本标签使用已经获取的资源，但我看到一个新的请求被触发了。

【问题讨论】：

标签： javascript html

【解决方案1】：

我终于想通了。您可能会看到这种情况发生，因为在 Chrome 开发工具中启用了禁用缓存：Disabling Chrome cache for website development

这不仅会禁用以前缓存的资产 - 它还意味着这样的事情会下载两次资产：

<script src="foo.js">
<script src="foo.js">

使用该复选框未选中，您应该会成功看到您的资产被缓存：

话虽如此，重要的是要注意，在我的测试中，Chrome 还不够聪明，无法意识到同一资源的预取和定期下载是同时发生的——它不会尝试缓存一个为另一个。因此，如果您的预取时间超过您的 setTimeout 毫秒值，您将看到重复下载！

这当然是因为你和我在这里所做的在某些方面是对预取的滥用。它应该是一种下载用于 next 导航的资源的方法。生活吧！

有没有办法强制预取请求使用某种类型的脚本或其他方式来避免再次获取 JavaScript 文件？

我尝试使用“脚本”的“as”属性值，但这似乎没有效果。

最后一点，type 与 script 和 javascript 的差异是可以预料的。这是开发工具试图告诉您其中一个文件将被执行，而另一个文件只是被下载。

【讨论】：