反应延迟加载javascript文件答案

【问题标题】：React lazy loading javascript file反应延迟加载javascript文件
【发布时间】：2019-04-30 11:53:36
【问题描述】：

我正在尝试使用 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 对象。我认为这是因为轻钱包没有默认导出。我怎么能解决这个问题？谢谢！

【问题讨论】：

标签： reactjs import export lazy-loading

【解决方案1】：

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

react-loadable 是一个 npm 包，它使代码拆分（也称为延迟加载）变得非常容易，并且还让您能够在延迟加载完成之前呈现加载组件。

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

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/>;
  }
}

【讨论】：

【解决方案2】：

确保您的 React 版本在 React v16.6.0 中是最新的。还有 React 背后的核心思想。 lazy 是 React.lazy 需要一个必须调用动态 import() 的函数。这必须返回一个 Promise，它解析为具有 默认导出 的模块，其中包含 React 组件。但是这种情况 min.js 不会给出任何承诺。很可能那没有用。

【讨论】：

还要确保您的 react-dom 是 v16.6