预加载一个cdn缓存文件答案

【问题标题】：Preload a cdn cached files预加载一个cdn缓存文件
【发布时间】：2020-01-20 01:05:09
【问题描述】：

我有一个缓存在某个 CDN 中的文件。

在我的本地环境中，您可以将浏览器中的标记读取为

<script src="/js/cool.js"></script>

但一旦投入生产，它就会变成这样：

<script src="/js/cool.js.pagespeed.ce.l2D9mD1nmX.js"></script>

.pagespeed.ce.l2D9mD1nmX.js 表示正在缓存中

现在我想知道预加载已经缓存在 cdn 中的文件是否可取或做法？

因为我在做

<link rel="preload" type="application/javascript" href="/js/cool.js" as="script">

在我的<head> 中，这会给我以下警告：

资源（预加载文件）已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的as 值并且是有意预加载的。

因为从技术上讲，/js/cool.js 不再存在于 dom 中

【问题讨论】：

标签： javascript html caching cdn preload

【解决方案1】：

在您的模块捆绑器中使用预加载插件。

问。预加载已经缓存在 cdn 中的文件是可取的还是一种做法？

A.是的，假设您的 cool.js 实际上需要预加载。

现在，警告实际上是预期的。请看，cool.js.pagespeed.ce.l2D9mD1nmX.js 和 cool.js 是服务器上的两个不同文件。您的文件cool.js.pagespeed.ce.l2D9mD1nmX.js 实际上是由您的module-bundler 生成的code.js 的克隆，对于某些reasons。您正在做的是预加载 cool.js，其代码永远不会在生产中执行，因此会发出警告 - ...使用链接预加载预加载但在窗口加载事件后的几秒钟内未使用 .但是，你真正需要做的是预加载cool.js.pagespeed.ce.l2D9mD1nmX.js。假设您使用 webpack 作为模块捆绑器，您需要一个名为 preload-webpack-plugin 的插件来实现相同的功能。

【讨论】：

cool.js.pagespeed.ce.l2D9mD1nmX.js 中的 l2D9mD1nmX 是一个随机 id，我相信它会随着时间的推移而改变。在这种情况下，一旦发生这种变化，在预加载中声明它可能会变得不同。有没有办法动态声明它？因此它将始终与 cdn 提供的 id 匹配。嗯，这是一个传统的设置，我们不使用 webpack。