Reactjs 在react应用程序中渲染svg图像时的延迟

我使用的是React版本16.8.6。我试图在我的应用程序中加载一些SVG图像，但是在图像出现在dom中之前有1秒的延迟

下面是如何加载svg图像

import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />

从“public/images/menu_icon.svg”导入菜单图标；

请查找显示加载延迟问题的gif链接。

---

注：这种情况仅在生产中发生。

我也遇到了同样的问题，我发现下面的文章说，您可以使用SVG作为组件，因为图像没有作为单独的文件加载，所以没有延迟。 它对我有用

从“React”导入React；
从“./logo.svg”导入{ReactComponent as ReactLogo}；
常量应用=（）=>{
返回(
);
}
导出默认应用程序；

取决于菜单_icon.svg中的内容，如果它足够大，可能需要1秒时间a）通过网络传输并b）渲染。抱歉，编辑了我的问题。这只发生在生产中，SVG图像没有那么大，每个都是2KB（没有gzip），我们需要一个测试用例。我们不调试生产系统。一旦你修复了你的生产系统，你的问题对其他任何人都没有帮助。

import React from 'react';

import {ReactComponent as ReactLogo} from './logo.svg';

const App = () => {
return (
 <div className="App">
   <ReactLogo />
 </div>
);
}
export default App;