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

Question

你认为把逻辑整理成实用文件并动态加载以加快站点速度是否更好?

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

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

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

Answer 1

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

在这里你试图导入一个实用程序函数——你可以简单地使用常规的ES2020动态导入。

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