A Way to Load CSS link[rel=preload] Method with Yeoman Webapp

Question

Is there a way to use the new standard link[rel=preload] with yo webapp so grunt serve will load the CSS file ?
Example:

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

Answer 1

I assume that by "so grunt serve will load the CSS file" you mean that the http server started by the grunt task will preemptively serve (push) the css file in addition to serving the http file, therefore saving time?

Unfortunately getting this to work is not currently as trivial as setting up grunt serve in the right way. Push operations is an Http/2 feature, and the server used by grunt serve by default is the stock node one, which is Http/1.1 only.

If you feel like helping yourself, and also contributing back to the community, you could author a project that wraps or forks 'grunt-serve' and replaces require('http') with something like this as the http server, while also having either a server-side parser examining the pages served looking for 'preload' attributes, or some other way of signifying to your plugin what files need to be served alongside each page.

Answer 2

I don't know of any browsers that actually support link[rel=preload] as of now nor do I even see it listed on caniuse.com.

This feature is really a browser implementation feature rather than something controlled by any application or server code so unfortunately, unless you're writing a browser, I think the answer is no, there is no way to use the new standard. We'll just need to wait for it to be adopted and implemented by the browsers.