延迟加载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:符号(react.lazy))，而不是返回光环对象。我认为这是因为lightwallet没有默认的导出。我怎么才能解决这个问题？谢谢!

Answer 1

我建议仿效这里的例子：

https://reacttraining.com/react-router/web/guides/code-splitting

react-loadable是一个npm包，它使代码分裂(即延迟加载)变得非常容易，并且还为您提供了在延迟加载完成之前呈现加载组件的能力。

唯一的缺点是，如果使用Babel来传输代码包，则必须添加对DynamicImport语法的支持，默认情况下，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/>;
  }
}

Answer 2

确保您的react版本在Reactiv16.6.0中是最新的。同时也是反应背后的核心思想。React.lazy接受一个必须调用动态导入()的函数。这必须返回一个包含React组件的默认导出的模块。但是这个场景是min.js不会做出任何承诺的。很可能那不起作用。