Preload styles before deferred scripts

[Dani21]

Is your feature request related to a problem? Please describe.
Currently HtmlWebpackPlugin inserts script tags before style tags by default. Deferring script execution and blocking styles is reasonable to load the page quickest without any jumping, and placing script tags before style tags means related assets can download asynchronously. However this also causes the browser to initiate script downloads before styles, and often means if a browser only has one connection open, there's an additional delay to loading styles to initiate the connection (especially if an SSL handshake needs to be done). As such, this can cause scripts to load before styles, even if the stylesheet is smaller.

Describe the solution you'd like
Using <link rel="preload" href="..." as="..."> tags in advance allows the HTML page to direct the order that assets are downloaded. Luckily with HtmlWebpackPlugin's templating parameters, this is easy to do if someone knows how to. However I don't believe there are any examples that demonstrate this in the repo. I would prefer it as an option, but just documenting this would be helpful for others.

Anyways, here's the workaround I've built to do this manually (insert these into the head tag of the template):

<%= htmlWebpackPlugin.files.css.map(url => `<link rel="preload" href="${url}" as="style">`).join('') %>
<%= htmlWebpackPlugin.files.js.map(url => `<link rel="preload" href="${url}" as="script">`).join('') %>

Describe alternatives you've considered
I've tried moving asset tags around, but since it is ideal that styles block page render while scripts are downloaded concurrently (just after styles begin downloading), I believe this is the most optimal solution.

Additional context
Issue #532 alluded to this but didn't show that it improves page downloads nor a concrete example of the impact. In addition, here's a timing graph showing that the second asset encounters a new connection including SSL handshake upon initial load, and that my workaround reduces the download time of the initial CSS:

Timing.Graph.mp4