React v16项目中如何懒加载非组件的第三方库函数（如xlsx导出方法）

DevOps 小满

2026-9-26

实现方案

直接使用ES标准的import()动态导入语法即可，无需依赖React的lazy/Suspense能力，具体修改如下：

移除顶部的静态导入语句：

- import writeXlsxFile from "write-excel-file";

如果是TypeScript项目，要保留类型提示的话可以单独引入类型，不会被打包到生产代码：

import type writeXlsxFile from "write-excel-file";

修改导出函数，在调用时动态加载库，同时可添加加载状态避免重复触发：

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
//... 其他静态导入保留

const YourComponent = () => {
  // 新增导出加载状态，用于控制按钮状态/防止重复点击
  const [exportLoading, setExportLoading] = useState(false);

  const fileCreate = async () => {
    if (exportLoading) return;
    setExportLoading(true);
    try {
      // 动态导入库，默认导出需要取.default属性
      const writeXlsxFile = (await import("write-excel-file")).default;
      await writeXlsxFile(exportData, {
        schema,
        fileName: `file.xlsx`,
      });
    } catch (error) {
      // 自定义错误处理逻辑，比如弹窗提示导出失败
      console.error("Excel导出失败：", error);
    } finally {
      setExportLoading(false);
    }
  };

  // 渲染时可以把导出按钮绑定loading状态
  return (
    // ...
    <button onClick={fileCreate} disabled={exportLoading}>
      {exportLoading ? "导出中..." : "导出Excel"}
    </button>
    // ...
  )
}