React-Loadable 只创建第一个组件块答案

【问题标题】：React-Loadable only creates first component chunkReact-Loadable 只创建第一个组件块
【发布时间】：2018-08-07 23:10:21
【问题描述】：

我真的不明白为什么在 create-react-app 构建中的代码拆分时我会遇到 React-Loadable 的此类问题。我正在尝试通过路由拆分代码并遵循文档和其他地方提到的基本规则，但只生成第一个组件块，而不是生成所有组件块。请就此提出您的解决方案或要点。

const MainRoute = () => (
<div> 
<Switch>
     <Route exact path="/" component={LoadableClientLogin} />
     <Route exact path="/apply" component = {LoadableApply}/> 
     <Route exact path="/new_application" component = 
{LoadableAddNewApplication}/> 
     <Route path="*" component={LoadableClientLogin} /> 
</Switch>  
</div>)

下面是 react-loadable 组件

import React, { Component } from 'react';
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
  loader: () => import(/* webpackChunkName: "clientLogin" */'./index'),
  loading: <div>Loading...</div>,
})

export default class LoadableClientLogin extends Component {
  render() {
    return <LoadableComponent />;
  }
}

【问题讨论】：

./index 中有什么内容？只有ClientLogin 组件？
索引是由许多子组件组成的父组件。比如页眉、页脚、概览等等……
你能发布你的 webpack 配置吗？
请分享 webpack 配置
试试this 模块。它做同样的事情。如果这也导致同样的问题，那么你的 webpack 配置需要检查。

标签： reactjs react-loadable

【解决方案1】：

在 react-loadable 的文档中，在 SSR 部分的最后，有一段说：

在客户端预加载准备好的可加载组件我们可以在客户端使用Loadable.preloadReady()方法来预加载页面中包含的可加载组件。

与Loadable.preloadAll() 一样，它返回一个承诺，这意味着我们可以为我们的应用补充水分。

这意味着为了生成两者：

1）第一层组件（LoadableClientLogin）

2）第二层组件（clientLogin）

你需要：

1) 将第二层组件包装在 Loadable 中，就像你已经做的那样

2) 将 ReactDOM.hydrate 或 ReactDOM.render 包裹在 Loadable.preloadAll() 内。例如，请参见以下代码块（来自 react-loadable 文档的代码）

// src/entry.js
import React from 'react';
import ReactDOM from 'react-dom';
import Loadable from 'react-loadable';
import App from './components/App';

Loadable.preloadReady().then(() => {
  ReactDOM.hydrate(<App/>, document.getElementById('app'));
});

【讨论】：