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 没有默认导出所致。有什么方法可以解决这个问题吗？谢谢！

- Jani

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，因为它使得在懒加载时显示一个加载组件变得非常容易，并提供钩子以显示错误组件并在导入失败的情况下重试导入。

在这里阅读更多有关 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/>;
  }
}

- Mike Abeln

Answer 2

请确保您的 React 版本已更新至 React v16.6.0。React.lazy 的核心思想是它接受一个必须调用动态 import() 的函数，该函数必须返回一个 Promise，该 Promise 解析为一个包含 React 组件的默认导出的模块。但是，在这种情况下，min.js 不会提供任何 Promise。很可能那不起作用。

- Dushan Ranasinghage

---

请确保您的 react-dom 版本为 v16.6。 - rishikarri