How Can I Insert the Prefetch & Preload Assets into my Custom HTML File in Vue-CLI 3?

user_426697 0
Viewed 2384

So vue-cli 3 will automatically inject all the links to asset files in the HTML file. It includes the assets with the preload and prefetch attributes as well.

I want to use my own HTML template and insert these same assets into it with the preload and prefetch attributes.

I have done this in the past by using something like this example, but it doesn't include the preload and prefetch attributes.

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="{% static '<%= htmlWebpackPlugin.files.chunks[chunk].entry %>' %}"></script>
<% } %>

I've looked at all the info available inside the htmlWebpackPlugin object but I don't see anything in there that I can use to determine if the asset should use prefetch or preload and with the as=script.

How can I do this? Obviously vue-cli 3 is doing it, but I'm not sure how.

vue-cli-3 vue-cli webpack-4 vue.js webpack
1 Answers

I understand you want to use your own template, tho I'd advise against it. 'Rabbit Hole' doesn't begin to describe messing with it. Rather, I'd customize the plugins to get the correct resources rendered how you like. Customization to preload/prefetch has been discussed at length here on the Vue CLI GitHub page

Using vue.config.js you should be able to chainWebpack to add specific options to to the PreloadPlugin (this plugin is used to manage both preload and prefetch tag injection in index.html) More info and examples on how to chain webpack is here.

user_26200510
Related