preload-webpack-plugin
preload-webpack-plugin copied to clipboard
GoogleChromeLabs
Support for manual placement of <link> tags
html-webpack-plugin supports disabling the automatic injection of <script> and <link> tags via inject: false. This provides more control and flexibility over the tags and where they appear and allows the plugin to be easily used with near-HTML templating languages that do not include <head> or <body> tags.
It would be awesome if this could be supported in this plugin as well.
I'm not familiar with that option in html-webpack-plugin. What would the syntax for the placeholder/injection point <link>s look like in the scenario you describe?
Thanks for the response! Some more details are available here. They expose an htmlWebpackPlugin template variable that can be used in the template to place <link>/<script> tags at any location in the document.
A similar preloadWebpackPlugin variable containing the lists of files that should be preloaded and prefetched would be ideal.
Any progress on this issue? It would be lovely to have an ability to inject the preloaded files manually.
For instance the plugin may tap htmlWebpackPluginBeforeHtmlGeneration along with htmlWebpackPluginAfterHtmlProcessing, extend assets in html plugin data with some meta of the preloading chunks, and then in htmlWebpackPluginAfterHtmlProcessing just use this meta for generating. Also inject option from html plugin should be handled in the second phase to prevent a duplicated output.
+1 I feel like the assumption that all chunks should simply be prepended into the <head> is limiting, and possibly counterproductive.
Our use case is an app designed for extremely low powered, very finicky embedded devices. Think throttle x20. Every little thing counts. We have some SSR elements in markup to get initial content rendered as early as possible. Our entry scripts are at the bottom of the <body>. Preloading JS and CSS in the head can cause the dependent requests to go out on the wire before the entry point script, which seems wrong. I want the imported script to be discoverable by the parser, but not sent prior to our entry point script.
In lieu of the full-blown templating system discussed above (which would be great) it would be great to just have an option to either append to <body>, or append to <head>.
Thanks for a great tool.
