vuejs
Option to put <link/> elements at bottom of page
Issue Type: Feature Request
Description: Given the support for prefetch, it seems like it would be worthwhile to add support for media tags, and putting prefetch links down at the bottom of the index file, rather than in the head. I'm not an expert on render blocking, but it seems like putting non-critical elements outside of head (which seems to render block). Thoughts?
I would even think that appending at bottom of the <body> should happen by default for rel: 'prefetch'. But just having the option to control it would be fine as well.
Any update from maintainers of this package?
After a bit of exploration, I found https://github.com/architgarg/html-webpack-injector:
Plugin that simplifies injection of chunks into head and body using HtmlWebpackPlugin
I forked it and added one commit to "Move <link rel="prefetch" ...> from <head> to <body>" https://github.com/slaweet/html-webpack-injector/commit/155b57d952180d6cacc84fcac5d1b22c94232196. So it is possible to control which links are in <head> and which in <body> without modifying this vuejs/preload-webpack-plugin project.
Unfortunately, even when all <link rel="prefetch" ...> elements are at the bottom of the page, they are still blocking the DOMContentLoaded event and a Vue SPA won't start until they are all loaded. so I didn't see any performance improvement from doing all of this (tested on build served with https://www.npmjs.com/package/serve in Google Chome 88).
Is this feature request the same descibed here?
If so, it would be really interesting. Right now I'm in trouble because I need to build a template without a <head>, but it keeps being created to inject the tags.
