React的延迟加载

Question

我知道延迟加载类似这样的组件

import React, { lazy } from "react";
const Search = lazy(() => import('./components/search/Search'));

我想知道如何像这样懒惰地处理进口商品？

import { ToastContainer, toast } from 'react-toastify';

Answer 1

lazy期望返回{ default: ... }对象的承诺。

如果模块不遵循此约定，则应在中间模块中将组件重新导出为default：

export { ToastContainer as default, toast } from 'react-toastify';

或在lazy函数中处理：

lazy(async () => {
  const { ToastContainer } = await import('react-toastify');
  return { default: ToastContainer };
});