我试图通过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没有默认导出功能。我如何解决这个问题?谢谢!
答案 0 :(得分:1)
我建议按照以下示例操作:
https://reacttraining.com/react-router/web/guides/code-splitting
react-loadable
是一个npm软件包,它使代码拆分(也就是延迟加载)非常容易,并且还提供了呈现加载组件直到延迟加载完成的能力。
唯一的陷阱是,如果您使用Babel
来转换代码包,则必须添加对动态导入语法的支持,webpack
默认已经具有此功能,但是{ {1}}没有。
The Babel插件:
Babel
通过添加对语法的支持将使这成为可能。
我建议@babel/plugin-syntax-dynamic-import
胜过react-loadable
,因为它可以在延迟加载发生时显示加载组件,这非常容易,并提供了钩子来显示错误组件并在出现错误时重试导入失败。
在此处详细了解React.lazy
:
https://github.com/jamiebuilds/react-loadable
您的代码应如下所示:
react-loadable
答案 1 :(得分:0)
确保您的React版本在React v16.6.0中是最新的。也是React背后的核心思想。 lazy是React.lazy接受一个必须调用动态import()的函数。这必须返回一个 Promise (承诺),该承诺会解析为具有默认导出且包含 React组件的模块。但是这种情况下min.js不会给出任何承诺。很有可能那是行不通的。