我正在尝试使用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))，而不返回lighttwallet对象。我认为这是因为lighttwallet没有默认的导出。我怎么才能绕过这个问题呢？谢谢！

推荐答案

我建议参照下面的示例： https://reacttraining.com/react-router/web/guides/code-splitting

react-loadable是一个NPM包，它使代码拆分(也称为延迟加载)变得非常容易，并且还允许您呈现加载组件，直到延迟加载完成。

唯一的问题是，如果您使用Babel来转换您的代码包，则必须添加对动态导入语法的支持，webpack默认情况下已经有了，但Babel没有。

巴别塔插件： @babel/plugin-syntax-dynamic-import 将通过添加对语法的支持来实现这一点。

阅读有关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/>;
  }
}