如何使预回迁链接与JavaScript文件一起工作?

如何使预回迁链接与JavaScript文件一起工作?,javascript,html,Javascript,Html,我正在尝试对html页面中的JavaScript资源使用预取(通过带有rel=“prefetch”的链接)。在Chrome中,我看到预回迁请求以“javascript”类型启动。如果我随后尝试通过在页面中插入一个脚本标记来获取相同的JavaScript资源,我希望这是从浏览器缓存中获取的,而不是从CDN中触发一个新请求来获取资源。然而,情况并非如此。我看到一个新的请求是用“脚本”的“类型”发出的。我假设问题与此请求和预回迁请求之间的类型不匹配有关 有没有办法强制预回迁请求使用某种类型的脚本或其他

我正在尝试对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(函数(){
const scriptElement=document.createElement(“脚本”);
scriptElement.src=”https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-cookies.js";
document.head.appendChild(scriptElement);
}, 2000);
参见上面的复制代码示例。我希望setTimeout中的script标记使用已经获取的资源,但是我看到一个新的请求被触发