我正在尝试使用 React.lazy 提高我的应用程序的性能。由于以太坊轻钱包是一个巨大的文件，我想把它放在一个单独的包中。当前工作的导入如下：
import lightwallet from 'eth-lightwallet/dist/lightwallet.min.js';
当我尝试使用惰性语法导入时
const lightwallet = React.lazy(() => import('eth-lightwallet/dist/lightwallet.min.js'));
只返回一个 React.lazy 对象($$typeof: Symbol(react.lazy))而不是 lightwallet 对象。我认为这是因为 lightwallet 没有默认导出。我怎样才能解决这个问题？谢谢！
我建议按照这里的例子：https :
//reacttraining.com/react-router/web/guides/code-splitting
react-loadable 是一个 npm 包，它使代码拆分（又名延迟加载）变得非常容易，并且还为您提供了在延迟加载完成之前渲染加载组件的能力。
唯一的问题是，如果您要使用Babel来转换代码包，则必须添加对动态导入语法的支持，webpack默认情况下已经具有此功能，但Babel没有。
Babel 插件：
@babel/plugin-syntax-dynamic-import
将通过添加对语法的支持来实现这一点。
我推荐react-loadableover，React.lazy因为它使显示加载组件而延迟加载非常容易，并为您提供钩子以显示错误组件并在失败的情况下重试导入。
react-loadable在此处阅读更多信息：https :
//github.com/jamiebuilds/react-loadable
你的代码看起来像这样：
import Loadable from 'react-loadable';
import Loading from './YOUR-LOADING-COMPONENT';
const LoadableWallet = Loadable({
loader: () => import('eth-lightwallet/dist/lightwallet.min.js'),
loading: Loading,
});
export default class Wallet extends React.Component {
render() {
return <LoadableWallet/>;
}
}
确保你的 React 版本在 React v16.6.0 中是最新的。也是 React 背后的核心思想。懒惰是 React.lazy 需要一个必须调用动态 import() 的函数。这必须返回一个Promise，该Promise解析为具有包含React 组件的默认导出的module。但是在这种情况下 min.js 不会给出任何Promise。很可能那没有用。