【问题标题】：How can I do manual code-splitting with preact?如何使用 preact 进行手动代码拆分？
【发布时间】：2019-05-25 06:19:46
【问题描述】：

我想使用 preact 手动进行代码拆分。 Preact 已经为路由拆分了代码，但我想自己做。

我的用例是我正在构建一个工具，用户可以在其中向仪表板添加小部件。在主页上，我只想包含用户已配置的小部件的代码，而不是用户未使用的小部件。

所以我不想将所有小部件的代码都捆绑在 bundle.js 中，而是在需要时懒惰地请求它，在呈现小部件列表时。

我曾尝试使用 async! 语法，我在一些旧的样板提交中看到了这种语法，但这不起作用。

我的代码的简化示例

配置数据

[{ "type": "notes", "title": "Widget 1}, { "type": "todo", "title": "Widget 2"}]

列表的渲染函数

const Grid = ({ widgets }) => (
    <ul>
        {widgets.map((widget) => <li key={widget.title}><Widget widget={widget} /></li>)}
    </ul>
);

小部件组件

这里有一个从类型到组件的映射：

import notes from widgets/notes;
import todo from widgets/todo;

class Widget extends Component {
    widgetMap(widget) {
      if (widget.type === 'notes') {
         return notes;
      }
      if (widget.type === 'todo') {
          return todo;
      }
    }

    render ({ widget }) {
        const widgetComponent = this.widgetMap(map);
        return (
            <div>
                <h1>{widget.title}</h1>
                <widgetComponent />
            </div>
        );
    } 
}

【问题讨论】：

标签： javascript code-splitting preact

【解决方案1】：

如果您使用的是 Preact X，它具有 <Suspense> 和 lazy，这与 React 使用的 API 相同。您可以在这里阅读更多关于它的详细信息：https://reactjs.org/docs/concurrent-mode-suspense.html

你的例子，修改后看起来像这样（代码从here调整）：

import { Suspense, lazy } from `preact/compat`;

const notes = lazy(() => import('./widgets/notes'));
const todo = lazy(() => import('./widgets/todo'));

class Widget extends Component {
    widgetMap(widget) {
      if (widget.type === 'notes') {
         return notes;
      }
      if (widget.type === 'todo') {
          return todo;
      }
    }

    render ({ widget }) {
        const widgetComponent = this.widgetMap(map);
        return (
            <Suspense fallback={<div>loading...</div>}>
                <div>
                    <h1>{widget.title}</h1>
                    <widgetComponent />
                </div>
            </Suspense>
        );
    } 
}

对于旧版本的 Preact，只要您设置了 Babel 或其他一些转译器来处理 dynamic module loading，您就可以自己组装异步加载 HOC。

export default asyncComponent = (importComponent) => {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);
      this.state = { component: null };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();
      this.setState({ component });
    }

    render() {
      const Component = this.state.component;
      return Component ? <Component {...this.props} /> : <div>loading...</div>;
    }
  }

  return AsyncComponent;
}

【讨论】：