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

Question

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

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

我试过使用“script”的“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 中的脚本标签使用已经获取的资源，但我看到一个新的请求被触发。

Answer 1

我终于想通了这一点。 您可能会看到这种情况发生，因为在 Chrome 开发工具中启用了禁用缓存：为网站开发禁用 Chrome 缓存

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

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

取消选中该复选框后，您应该会成功看到您的资产被缓存：

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

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

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

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

最后要注意的是， script和javascript的type差异是可以预料的。 这是 Dev Tools 试图告诉您其中一个文件将被执行，而另一个文件只是被下载。

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

问题描述

1 个解决方案

解决方案1
0 2021-07-04 14:27:23

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

问题描述

1 个解决方案

解决方案1 0 2021-07-04 14:27:23

解决方案1
0 2021-07-04 14:27:23