Nextjs 动态函数导入非组件

如何解决Nextjs 动态函数导入非组件

我正在使用 nextjs 应用程序。我想根据作为组件道具提供的路径动态导入一个函数。今天，我使用 id 到函数的映射，并使用路径中提供的 id 来检索函数并在我的组件中使用它。但是，我怀疑这是否利用了代码拆分。

这里有一个最小的例子来说明我的观点。然而，想象一下，这些函数并不像这里详细描述的那么简单——想象一下有很多，而且每个都很大，因此我们最好只将渲染所需的函数发送给客户端。也就是说，在示例情况下，仅当路径中的 add 为 algoId（其他 id 相同）时才发送 add。

import { FunctionComponent,ReactElement,useState } from "react";
import { GetStaticPaths,GetStaticPathsResult,GetStaticProps,GetStaticPropsResult } from "next";
import { ParsedUrlQuery } from "querystring";
import * as React from "react";

type MyAlgo = (a: number,b: number) => number;
const add: MyAlgo = (a: number,b: number): number => a + b;
const multiply: MyAlgo = (a: number,b: number): number => a * b;
const myAlgos: Map<string,MyAlgo> = new Map([["add",add],["multiply",multiply]]);

interface MyParams extends ParsedUrlQuery {
    algoId: string;
}

interface MyProps {
    algoId: string;
}

export const getStaticPaths: GetStaticPaths<MyParams> = (): Promise<GetStaticPathsResult<MyParams>> => {
    return Promise.resolve({
        paths: [...myAlgos.keys()].map(algoId => ({ params: { algoId } })),fallback: false
    });
};

export const getStaticProps: GetStaticProps<MyProps,MyParams> =
    ({ params }): Promise<GetStaticPropsResult<MyProps>> => {
        if (!params?.algoId) {
            throw new Error("No algo id");
        }
        return Promise.resolve({
            props: {
                algoId: params.algoId,}
        });
    };

const MyPage: FunctionComponent<MyProps> = ({ algoId }): ReactElement => {
    const algo = myAlgos.get(algoId);
    if (!algo) {
        throw new Error(`No algo for algo id ${algoId}`);
    }
    const [a,setA] = useState(0);
    const [b,setB] = useState(0);
    const [res,setRes] = useState(0);
    return <div>
        <input
            type="number"
            placeholder="a"
            onChange={(e) => {
                setA(parseInt(e.target.value));
                setRes(algo(a,b));
            }}
        />
        <input
            type="number"
            placeholder="b"
            onChange={(e) => {
                setB(parseInt(e.target.value));
                setRes(algo(a,b));
            }}
        />
        <p>{res}</p>
    </div>
};

export default MyPage;

有没有办法为客户端实现动态导入以利用代码拆分？我注意到有一种方法可以动态导入组件，但这不是我想要的。我希望组件对于此页面类型保持不变，并且我的函数根据路径进行更改。

谢谢。