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

【问题标题】：Using React.lazy vs. webpack dynamic imports?使用 React.lazy 与 webpack 动态导入？
【发布时间】：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 中进行捆绑）

【问题讨论】：

标签： reactjs 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 动态导入？仅适用于第三方库，因为这些动态导入中的任何内容都不可渲染？
正确，你不能兑现承诺，