У меня есть приложение с Vue CLI. Когда приложение загружается, у меня есть куча изображений, которые появляются с переходом, когда пользователь нажимает кнопку. Проблема в том, что когда пользователь нажимает кнопку, соответствующее изображение только тогда начинает загружаться, а это означает, что большая часть анимации выполняется до этого момента. Это делает опыт довольно прерывистым, потому что изображения внезапно появляются во время перехода, вытесняя другие элементы. Я хочу предварительно выбрать их при загрузке сайта.
Этот ответ предлагает использовать класс Image. Однако, в соответствии с документацией по Vue CLI, для этого Vue внутренне использует свой собственный плагин preload-webpack-plugin, и его, очевидно, можно настроить.
Я попытался настроить его так, чтобы он загружал изображения:
vue.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'prefetch',
as (entry) {
if (/\.css$/.test(entry)) return 'style';
if (/\.woff$/.test(entry)) return 'font';
if (/\.png$/.test(entry)) return 'image';
return 'script';
}
})
]
}
}
Это только удается испортить окончательный index.html, оставив его без скриптов и стилей сборки внутри.
Если я уберу эту строку:
new HtmlWebpackPlugin(),
Сайт по-прежнему загружается, но изображения не загружаются заранее. Это так же, как если бы я никогда ничего не делал в файле vue.config.js.
Как мне правильно его настроить?
Редактировать: В компонентах Vue я использую require() для загрузки изображений, то есть они проходят через Webpack. Например:
<img :src="require('../assets/img/' + img)" draggable="false">
Изменить: мне удалось предварительно выбрать изображения, как Рой J предложил в комментариях:
PreloadImages.vue в моем основном компоненте:
<template>
<div style="display: none;">
<img :src="require('../assets/img/foo.png')">
<img :src="require('../assets/img/bar.png')">
<img :src="require('../assets/img/baz.png')">
</div>
</template>
Однако это не ответ на мой настоящий вопрос - он не использует подсказки ресурсов через теги <link>. Это также требует больше усилий, и я считаю, что это плохая практика.