javascript - 使用 System.import 或 require.ensure 响应代码拆分和服务器端渲染

Question

我正在研究在 React 应用程序中使用的代码拆分。

我似乎无法找到一种方法来为服务器端渲染引入代码拆分(和导入)，从而干净地传递到客户端。

仅供引用:我知道有一种方法可以用 React Router 做到这一点，但我认为这是一个更普遍的问题，并不是每个人都想使用它。另外，我觉得代码拆分不一定是路由的同义词。

这是一个非常基本的类示例，它将加载和呈现拆分代码包 SplitComponent 的内容。

如果服务器端呈现的路由包含此组件，则 componentWillMount 将确保代码在 render 之前与 require 同步加载叫做。它会检查它是否在服务器端，因此它不会在客户端执行此操作。

然后对于客户端，componentDidMount 将使用System.import 异步加载SplitComponent。

这样做的结果是服务器端呈现正确的页面并且客户端将显示它，但是 componentDidMount 会立即导致客户端加载 SplitComponent，在此期间它将不显示任何内容(但会短暂地取决于加载时间)。最后，SplitComponent 将加载并呈现。但是当它被移除然后再次添加时，可能会出现闪烁。这有损于在服务器上进行渲染的优势。

有没有更好的方法来处理这个问题？

import React from 'react';

const canUseDOM = !!(
  (typeof window !== 'undefined' &&
  window.document && window.document.createElement)
);

class Lazy extends React.Component {
  constructor() {
    super();
    this.state = {
      module: null
    };
  }

  componentWillMount() {
    if (!canUseDOM) {
      const m = require('./SplitComponent');
      this.setState({
        module: m.default
      });
    }
  }

  componentDidMount() {
    if (!this.state.module) {
      System.import('./SplitComponent').then(m => {
        this.setState({
          module: m.default
        });
      });
    }
  }

  render() {
    const { module } = this.state;
    console.log('Rendering Lazy', module);
    if (module) {
      return React.createElement(module);
    }

    return null;
  }
}

export default Lazy;

Answer 1

如果您正在寻找一种可以大大减少解决方案中涉及的样板文件数量的方法，我建议您查看“react-async-component”(https://github.com/ctrlplusb/react-async-component)

来自github页面的描述:

Create Components that resolve asynchronously, with support for server side rendering and code splitting.

This library is an evolution of code-split-component. Unlike code-split-component this library does not require that you use either Webpack or Babel. Instead it provides you a pure Javascript/React API which has been adapted in a manner to make it generically useful for lazy-loaded Components, with support for modern code splitting APIs (e.g import(), System.import, require.ensure).

我遇到了同样的问题(客户端渲染器闪烁半秒)，你的解决方案是我找到的唯一解决它的方法，但从那以后我遇到了这个库，它的工作方式就像对我来说是一种魅力。

它的工作原理是将组件的状态存储在服务器呈现模板中的 window 对象上，它在客户端使用该模板，直到异步客户端呈现完成。

文档也很好，总是很好。

在使用少量样板文件将您的渲染方法包装在服务器端和客户端后，它就像:

import React from 'react';
import { createAsyncComponent } from 'react-async-component';

const AsyncComponent = createAsyncComponent({
  resolve: () => System.import('./components/MyComponent')
});

<AsyncComponent myProp={1} />

试一试。我希望它对你和我一样有效。