Preloading of resources like fonts

[markusv]

For faster page load it would be nice to be able to preload resources like fonts. For this we need to add something like this to the head of the html:

<link rel="preload" href="https://assets-t.storebrand.no//fonts/System-Icons/System-Icons.woff2" as="font" type="font/woff2" crossorigin>

The url of our fonts changes with the environment it would therefore be nice to able to to this with iwa. Could we do this by adding a new head field to the config? The field would be a array of strings, like this:

"head": {
    "development": ["<link rel=\"preload\" href=\"https://assets-t.storebrand.no//fonts/System-Icons/System-Icons.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>"],
    "client-t": ["<link rel=\"preload\" href=\"https://assets-t.storebrand.no//fonts/System-Icons/System-Icons.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>"],
    "production": ["<link rel=\"preload\" href=\"https://assets.storebrand.no//fonts/System-Icons/System-Icons.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>"]
  },
  "env": {}

with this projects have complete freedom with what they want to preload.

Another possibility is to make some kind of config structure for this. For example like this:

"head": {
    "preload": {
      "development": [{
        "href": "https://assets-t.storebrand.no//fonts/System-Icons/System-Icons.woff2",
        "as": "font",
        "type": "font/woff2",
        "crossorigin": true
      }],
      "client-t": [{
        "href": "https://assets-t.storebrand.no//fonts/System-Icons/System-Icons.woff2",
        "as": "font",
        "type": "font/woff2",
        "crossorigin": true
      }],
      "production": [{
        "href": "https://assets.storebrand.no//fonts/System-Icons/System-Icons.woff2",
        "as": "font",
        "type": "font/woff2",
        "crossorigin": true
      }]
    }
  },
  "env": {}