一种使用 Yeoman Webapp 加载 CSS 链接[rel=preload] 方法的方法答案

【问题标题】：A Way to Load CSS link[rel=preload] Method with Yeoman Webapp一种使用 Yeoman Webapp 加载 CSS 链接[rel=preload] 方法的方法
【发布时间】：2016-03-18 20:08:45
【问题描述】：

有没有办法将新标准 link[rel=preload] 与 yo webapp 一起使用，以便 grunt serve 将加载 CSS 文件？
示例：

<link rel="preload" href="path" as="style" onload="this.rel='stylesheet'">

【问题讨论】：

标签： gruntjs yeoman gruntfile

【解决方案1】：

我假设“所以 grunt serve 将加载 CSS 文件”是指由 grunt 任务启动的 http 服务器除了提供 http 文件之外还会抢先服务（推送）css 文件，从而节省时间？

不幸的是，目前要使其正常工作并不像以正确的方式设置 grunt serve 那样简单。推送操作是Http/2的特性，grunt serve默认使用的服务器是股票节点一，只有Http/1.1。

如果您想帮助自己，也想回馈社区，您可以编写一个项目来包装或分叉“grunt-serve”，并将require('http') 替换为this 作为http 服务器，同时也让服务器端解析器检查提供的页面以查找“预加载”属性，或者以其他方式向您的插件表明需要在每个页面旁边提供哪些文件。

【讨论】：

是的，你所假设的正是我试图解释的。当我有时间的时候，我会试一试，现在我对这里发生的事情有了更好的了解，多亏了你。我给你答案了，享受你的+50

【解决方案2】：

到目前为止，我不知道有哪些浏览器实际上支持link[rel=preload]，我什至没有看到它在caniuse.com 上列出。

此功能实际上是浏览器实现功能，而不是由任何应用程序或服务器代码控制的东西，所以很遗憾，除非您正在编写浏览器，否则我认为答案是否，没有办法使用新标准。我们只需要等待它被浏览器采用和实现。

【讨论】：

我在 edge 和 chrome 上试了一下，效果很好。我能说的就这些了。