React.lazy 目前只支持默认导出(default exports)。如果想被引入的模块使用命名导出(named exports),可以创建一个中间模块,来重新导出为默认模块。这能保证 tree shaking 不会出错,并且不必引入不需要的组件。

1、有多个export组件,但是没有default export组件

  1. // ManyComponents.js
  2. export const MyComponent = /* ... */;
  3. export const MyUnusedComponent = /* ... */;

2、创建中间组件使之成为default export组件

  1. // MyComponent.js
  2. export { MyComponent as default } from "./ManyComponents.js";

3、在React.lazy中传入这个default export组件

  1. // MyApp.js
  2. import React, { lazy } from 'react';
  3. const MyComponent = lazy(() => import("./MyComponent.js"));