React 解决方法中的命名延迟导入

Question

我在 React 中为命名延迟导入做了一个解决方法我希望有人检查这是否真的作为延迟导入工作。

Toast.js

import { ToastContainer } from "react-toastify";
export default ToastContainer;

App.js

const ToastContainer = React.lazy(() => import("../main/shared/toast"));

return(
      <Suspense fallback={null}>
        <ToastContainer />
      </Suspense>
);

Answer 1

正如 React 官方文档所说“目前只支持默认导出。如果您要导入的模块使用命名导出，您可以创建一个中间模块，将其重新导出为默认模块。这确保了 tree shaking 继续工作，并且你不会拉入未使用的组件。"

https://reactjs.org/docs/code-splitting.html

它作为惰性组件工作，您将其导出为第二行中的默认组件

React 解决方法中的命名延迟导入

Named Lazy import in React Workaround

lazy-loading

reactjs