React.lazy
目前只支持默认导出(default exports)。如果想被引入的模块使用命名导出(named exports),可以创建一个中间模块,来重新导出为默认模块。这能保证 tree shaking 不会出错,并且不必引入不需要的组件。
1、有多个export组件,但是没有default export组件
// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
2、创建中间组件使之成为default export组件
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
3、在React.lazy中传入这个default export组件
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));