1

我真的不明白为什么在 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 />;
  }
}
4

1 回答 1

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'));
});
于 2018-10-13T00:03:10.017 回答