我有一个使用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">
编辑: 我能够像Roy 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>标签的资源提示。它还需要更多的努力，我认为这是一种不好的做法。
<img>标签中，放在不可见的地方吗？ - Roy J<img>标签，这不符合DRY原则。其次，路径是动态的，这使得事情变得更加复杂。 - dodovimg变量是一个prop。我无法在组件外部访问该prop。此外，我不能将隐藏的<img>放在组件内部，因为它会在组件挂载时加载图像，这是没有意义的。 - dodov