在 React 中,是否可以预加载通过 JS 导入导入的图像?
我想要一种从我的 js 文件中组合以下内容的方法
import image from './image.svg';
以及我的 index.html 文件中的以下内容
<link
rel="preload"
as="image"
href="???/image.svg"
/>
答案 0 :(得分:0)
我不知道 create-react-app 怎么样,但是如果您使用自己的 webpack 设置,您可以尝试以下操作:
plugins: [
new HtmlWebpackPlugin({
...
}),
new HtmlWebpackInjectPreload({
files: [
{
match: /(filename)+.+(\.webp|\.png)$/,
attributes: { as: 'image' },
}
],
}),
]
如果你使用的是 HtmlWebpackPlugin,你可以试试 HtmlWebpackInjectPreload 插件,它是第一个插件的扩展。它将查找输出的资产名称,并根据这些发现将链接注入 head 部分。
https://github.com/principalstudio/html-webpack-inject-preload