使用React.lazy从单个文件导入多个导出项的正确语法是什么？

核心逻辑说明 #

React.lazy 默认仅支持加载默认导出的组件，要加载同个文件内的多个命名导出组件，需要手动将对应命名导出映射为Promise返回的default属性。针对同个文件的多次import调用不会触发重复加载，浏览器的ES模块自带缓存机制，文件只会被加载一次。

基础实现代码 #

对应示例中的import { StudentDashboard, StudentLearningView } from './studentView.jsx'场景，懒加载写法如下：

import { lazy } from 'react';

// 分别封装每个命名导出组件
const StudentDashboard = lazy(() => 
  import('./studentView.jsx').then(module => ({ default: module.StudentDashboard }))
);

const StudentLearningView = lazy(() => 
  import('./studentView.jsx').then(module => ({ default: module.StudentLearningView }))
);

简化写法：封装通用工具函数 #

如果需要批量导入多个命名导出，可以提前封装懒加载工具函数减少重复代码：

// 封装懒加载命名导出的工具函数
const lazyNamed = (modulePath, exportName) => {
  return lazy(() => 
    import(modulePath).then(module => ({ default: module[exportName] }))
  );
};

// 调用工具函数导入
const StudentDashboard = lazyNamed('./studentView.jsx', 'StudentDashboard');
const StudentLearningView = lazyNamed('./studentView.jsx', 'StudentLearningView');

使用注意事项 #

所有懒加载组件必须包裹在Suspense组件中使用，指定加载过程中展示的兜底内容：

import { Suspense } from 'react';

function App() {
  return (
    {/* fallback可以自定义为骨架屏、加载动画等任意组件 */}
    <Suspense fallback={<div>组件加载中，请稍候...</div>}>
      <StudentDashboard />
      <StudentLearningView />
    </Suspense>
  );
}

内容的提问来源于stack exchange，提问作者Stephane