Как я могу вставить ресурсы предварительной выборки и предварительной загрузки в свой пользовательский HTML-файл в Vue-CLI 3?

Question

Итак, vue-cli 3 автоматически вставит все ссылки на файлы ресурсов в файл HTML.Он также включает в себя ресурсы с атрибутами preload и prefetch.

Я хочу использовать свой собственный шаблон HTML и вставлять в него те же активы с атрибутами preload и prefetch.

Я делал это в прошлом, используя что-то вроде этого примера, но он не включает атрибуты preload и prefetch.

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

Я посмотрел всеинформация, доступная внутри объекта htmlWebpackPlugin, но я не вижу там ничего, что я мог бы использовать, чтобы определить, должен ли актив использовать prefetch или preload и с as=script.

Какя могу это сделать?Очевидно, Vue-Cli 3 делает это, но я не уверен, как.

Answer 1

Я понимаю, что вы хотите использовать свой собственный шаблон, но я бы посоветовал против него.«Кроличья нора» не начинает описывать беспорядок с ним.Скорее, я бы настроил плагины, чтобы они отображали нужные вам ресурсы.Настройка предварительной загрузки / предварительной выборки обсуждалась подробно здесь, на странице Vue CLI GitHub

Используя vue.config.js, вы должны иметь возможность chainWebpack для добавления определенныхопции для PreloadPlugin (этот плагин используется для управления как предварительной загрузкой, так и внедрением тега предварительной выборки в index.html). Дополнительные сведения и примеры о том, как объединить в цепочку веб-пакет, здесь.