动态导入组件以生成静态站点

Question

我有一个动态页面树，每个页面都有自己的内容，使用不同的组件。

这些页面在构建时使用Next.js的静态网站生成进行静态预渲染。我使用以下组件来处理组件的总体：

import React from "react";
import { Data } from "../../types/data";
import { Block } from "../../css/content";
const componentList: Record<string, any> = {
BlockA: require("../molecule/BlockA").BlockA,
BlockB: require("../molecule/BlockB").BlockB,
BlockC: require("../organism/BlockC").BlockC,
BlockD: require("../molecule/BlockD").BlockD,
BlockE: require("../organism/BlockE").BlockE,
BlockF: require("../atom/BlockF").BlockF,
BlockG: require("../organism/BlockG").BlockG,
...
};
interface TemplateProps {
data: Data.Main;
props?: any;
}
export const Template: React.FC<TemplateProps> = ({ data, props = {} }) => {
return (
<React.Fragment>
{data.content.map((item, index) => {
const Component = componentList[item.component.type];
if (!Component) return null;
return (
<Block key={index}>
<Component {...item.component} {...props} />
</Block>
);
})}
</React.Fragment>
);
};

这很好，但会导入所有块，即使特定页面不需要这些块，也会增加第一次加载js的大小。我如何防止这种情况发生，并且在构建时按需动态导入组件？

使用next/dynamic可以解决这个问题，但AFAIK可以防止组件被静态预渲染，我们不想错过这一点。

Answer 1

您应该使用React.lazy

import React from "react";
import { Data } from "../../types/data";
import { Block } from "../../css/content";
const componentList: Record<string, any> = {
BlockA: React.lazy(() => import("../molecule/BlockA").BlockA)
};
interface TemplateProps {
data: Data.Main;
props?: any;
}
export const Template: React.FC<TemplateProps> = ({ data, props = {} }) => {
return (

<React.Suspense fallback={<div>loading</div>}>
{data.content.map((item, index) => {
const Component = componentList[item.component.type];
if (!Component) return null;
return (
<Block key={index}>
<Component {...item.component} {...props} />
</Block>
);
})}
</React.Suspense>
);
};

请记住，您需要将React.lazy与React.Suspense一起使用。