reactjs - react 延迟加载javascript文件

Question

我正在尝试使用 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 没有默认导出。我怎样才能解决这个问题？谢谢!

Answer 1

我建议按照此处的示例进行操作:
https://reacttraining.com/react-router/web/guides/code-splitting
react-loadable是一个 npm 包，它使代码拆分(也称为延迟加载)变得非常容易，并且还为您提供了在延迟加载完成之前渲染加载组件的能力。

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

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

我推荐 react-loadable在React.lazy因为它使得在延迟加载时显示加载组件非常容易，并为您提供钩子(Hook)以显示错误组件并在失败的情况下重试导入。

阅读更多关于 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/>;
  }
}