使用 React.lazy 与 webpack 动态导入？

Posted 2023-02-23

【中文标题】使用 React.lazy 与 webpack 动态导入？

【英文标题】：Using React.lazy vs. webpack dynamic imports?

【发布时间】：2020-08-31 09:30:51

【问题描述】：

我想知道使用React.lazy()“声明”动态导入之间有什么区别，例如：

const Component = React.lazy(() => import('./Component'));

或者使用 webpack 的动态导入来实现，如下所述： https://webpack.js.org/guides/code-splitting/#dynamic-imports

（就我而言，无论如何我都打算在 webpack 中进行捆绑）

【参考方案1】：

React.lazy 得到一个回调，该回调返回一个 Promise，并返回一个可渲染的组件。

Webpacks 动态导入返回一个 Promise，该 Promise 将在加载块时解析，因此，您不能直接渲染它。

您可以重新实现React.lazy 所做的，这确实是基本的实现。

class SomeComponent extends React.Component 
  state = LazyComponent: null;

  async componentDidMount() 
    const LazyComponent = await import('./path/to/LazyComponent');
    this.setState(LazyComponent);
  
  render() 
    const LazyComponent = this.state;
    return LazyComponent ? <LazyComponent ...props /> : null;
  

【讨论】：

所以只是为了确保我理解 - 我不能对组件使用 Webpack 动态导入？仅适用于第三方库，因为这些动态导入中的任何内容都不可渲染？

正确，你不能兑现承诺，