反应迟缓加载javascrip文件 [英] React lazy loading javascript file

问题描述

我正在尝试使用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而不是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/>;
  }
}

这篇关于反应迟缓加载javascrip文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！