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 一起使用。

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

1 个答案: