如何在 Next.js 中动态加载实用程序方法？

问题描述

您认为整理实用程序文件的逻辑并动态加载以加快站点速度是否可行？

我在 getInvoiceDetails 文件中有一个 getInvoiceDetails.tsx 方法：

export default const getInvoiceDetails = (
  eventId: string
) => {

我将它导入到另一个文件中，在一个组件中：

const getInvoiceDetails = dynamic(
  () => import("../../Utility/BuyTicket/getInvoiceDetails")
);

并调用它：

let resp = getInvoiceDetails(
      eventId

但是 yarn build 引发错误：

  Not all constituents of type 'ComponentType<{}>' are callable.
    Type 'ComponentClass<{},any>' has no call signatures.

  286 |   const callInvoiceDetails = () => {
  287 |     callSaveData();

> 288 |     let resp = getInvoiceDetails(
> Blockquote

你知道这里出了什么问题吗？

解决方法

Next.js 动态导入用于动态导入React 组件。

这里您尝试导入一个实用函数 - 您可以简单地使用常规的 ES2020 dynamic import 代替。

const getInvoiceDetails = await import("../../Utility/BuyTicket/getInvoiceDetails");