为函数而不是组件响应延迟加载

Question

我正在开发 React v16 应用程序，需要加载一个繁重的 (IMO) 库以用于 xlsx 数据导出。

我正在使用函数 components/hooks。

我了解并使用 <Suspense /> 组件和 lazy 延迟加载模块。但由于此项不是组件，它只是一个库函数，我需要运行和 onClick 事件，我不能使用 lazy/suspense.

如何只在需要时延迟加载此功能？ (writeXlsxFile)

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
//...
import writeXlsxFile from "write-excel-file";

//...
  const fileCreate = async () => {
    await writeXlsxFile(exportData, {
      schema,
      fileName: `file.xlsx`,
    });
  };

return(//...

Answer 1

JavaScript（通过关联，React）支持 Dynamic Imports.

在任何情况下，您都可以使用以下代码延迟加载您的函数：

const fileCreate = async () => { 
  const writeXlsxFile = await import ('write-excel-file')
  void await writeXlsxFile(exportData, {
      schema,
      fileName: `file.xlsx`,
  });
}

-- 2021-11-10 更新

此解释了使用 default 导入时的情况。您必须在模块中调用 default 函数。

所以，

const fileCreate = async () => { 
  const {default: writeXlsxFile} = await import ('write-excel-file')
  void await writeXlsxFile(exportData, {
      schema,
      fileName: `file.xlsx`,
  });
}

为函数而不是组件响应延迟加载

React lazy load for a function, not a component

lazy-loading

reactjs

react-functional-component