React 延迟加载 JavaScript 文件

我正在尝试使用 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：符号（react.lazy））返回而不是 lightwallet 对象。我认为这是因为 lightwallet 没有默认导出。我怎样才能解决这个问题？谢谢！

我建议按照这里的例子：
https://reacttraining.com/react-router/web/guides/code-splitting https://reacttraining.com/react-router/web/guides/code-splitting

react-loadable是一个 npm 包，它使代码分割（也称为延迟加载）变得非常容易，并且还为您提供了渲染加载组件直到延迟加载完成的能力。

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

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

我建议react-loadable over React.lazy因为它使得在延迟加载发生时显示正在加载的组件变得非常容易，并且为您提供了显示错误组件并在失败时重试导入的钩子。

阅读更多关于react-loadable here:
https://github.com/jamiebuilds/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/>;
  }
}