使用 CRA 延迟加载 SVG

Question

我想用 CRA 延迟加载 SVG，但该死的我被困住了，需要你的帮助。

我正在尝试做这样的事情：

const LoadIcon = (name) => lazy(() => import(`../icons/${name}.svg`));

const SvgComponent = ({ icon }) => {
  const Icon = LoadIcon(icon);
  console.log("Icon ", Icon);
  return <Icon />;
};

值得一提的是，我确实尝试了官方 CRA 建议的方法（不过没有延迟加载）：

import { ReactComponent as Icon } from "../icons/myCoolSvg.svg";

但是这种解构不适用于惰性。

请帮忙！

Answer 1

为了使用惰性进行破坏，您可以默认从单独的文件中导出它，如下所示

// Middle Component
import { ReactComponent as Icon } from "./github.svg";

export default Icon;

然后在你的组件中延迟调用它

const MiddleComponent = lazy(() => import(`./MiddleComponent`));
const Svg = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MiddleComponent />
    </Suspense>
  );
};

在此处查看演示 - https://codesandbox.io/s/react-lazy-svg-loading-gi2ru

Answer 2

您可以使用 svgr 将 svg 转换为 React 组件，然后在 React 组件版本上进行延迟加载。

https://github.com/facebook/create-react-app/issues/7211

Answer 3

另一种没有冗余组件的解决方案：

const SomeImage = lazy(async () => ({
    default: (await import("./some_image.svg")).ReactComponent,
}));
const SomeComponent = () => (
    <Suspense fallback={<div>Loading...</div>}>
      <SomeImage />
    </Suspense>
);