如何在 Express 4 中正确设置链接预取标头？

Posted 2023-05-07

【中文标题】如何在 Express 4 中正确设置链接预取标头？

【英文标题】：How do I properly set link prefetch headers in Express 4?

【发布时间】：2015-09-06 17:23:54

【问题描述】：

根据MDN，正确的做法是发送header：

Link: </images/big.jpeg>; rel=prefetch

所以我的表达语法是：

res.header('Link', '</images/big.jpeg>; rel=prefetch');

我看到它在我的浏览器中显示为：

Link:</images/big.jpeg>; rel=prefetch

但 chrome 从不尝试下载图像。元和链接方法工作正常。

是我设置的标头错误还是浏览器无法处理标头值？

UDPATE：好的，看起来我做的不错，但 Linux/Ubuntu 上的 Chrome 43 和 Chromium 43 尚不支持此功能。这在 Firefox 38 中运行良好..

难道 Chromium 只是没有在“网络”选项卡中显示预取？

更新 2：因此看起来 Chrome/Chromium 正在从“网络”选项卡中隐藏文件传输。如果有人能证实这一点，我将不胜感激..

【参考方案1】：

在 Express 4+ 中为一个文件设置预取..

res.set('Link', '<static/js/file1.js>; rel=prefetch');

对于多个文件。

res.set('Link', '<static/js/file1.js>; rel=prefetch, <static/js/file2.js>; rel=prefetch');

请勿尝试在 Chrome 中进行测试，如果您在“网络”选项卡下进行调查，Chrome 会欺骗您并显示它无法正常工作。始终使用Firefox 进行测试。

You can see me implementing this in a larger project in context here.

【讨论】：

当文件有动态哈希时，我们如何添加预取或预加载，例如：styles.b2d783724150de9a2373.css