使用 GatsbyJS 动态导入

Question

• 我们有一个大型的 GatsbyJS 3 (React) 项目，用于构建多个网站。
• 每个网站都使用特定的环境文件构建，然后上传到不同的位置。
• 这些网站具有相同的代码库，但有一些例外（例如网站特定的组件和图像）。
• 我们不使用SSR。

问题在于网站特定组件非常大，因此使不使用这些特定组件的各个网站的代码变得臃肿。例如，这会导致灯塔得分不佳（未使用的代码）和糟糕的用户体验（加载时间较长）。

这是一个高度简化的示例组件，它显示网站特定的 svg（通过

gatsby-plugin-react-svg

加载）：

import React from "react";

import Site1 from "../../images/site1.svg";
import Site2 from "../../images/site2.svg";
import Default from "../../images/default.svg";

const Image = () => {
  let staticImage = <Default />;

  switch (process.env.GATSBY_SITE) {
    case "site1":
      staticImage = <Site1 />;
      break;
    case "site2":
      staticImage = <Site2 />;
      break;
    default:
  }

  return (
    <>{staticImage}</>
  );
};

export default Image;

我猜/理解这行不通，因为 GatsbyJS/React/Webpack（？）根本不知道这个组件中发生了什么以及何时显示哪个图像。

我尝试使用

loadable components

来解决这个问题，但没有成功。这是上面的示例代码，但带有可加载组件：

import React from "react";

import loadable from "@loadable/component";

const DynamicImage = loadable(async () => {
  switch (process.env.GATSBY_SITE) {
    case "site1":
      return import("../../images/site1.svg");
    case "site2":
      return import("../../images/site2.svg");
    default:
      return import("../../images/default.svg");
  }
});

const Image = () => {
  return <DynamicImage />;
};

export default Image;

使用此代码，尽管只显示一张，但所有三张图像仍会加载。我希望仅加载使用/所需的图像（或其他情况下的组件）。

Answer 1

您尝试过

React.lazy

功能吗？

const Github = React.lazy(async () => ({
  default: (await import("./github.svg")).ReactComponent,
}));
const Google = React.lazy(async () => ({
  default: (await import("./google.svg")).ReactComponent,
}));

const DynamicImage = () => {
    <React.Suspense fallback={<div>Loading...</div>}>
      {if(CONDITION) && <Github />}
      {if(OTHER_CONDITION) && <Google />}
    </React.Suspense>
};

请参阅此处的示例：