【问题标题】：How to load async react components without Webpack imports with SSR and RR4如何使用 SSR 和 RR4 在没有 Webpack 导入的情况下加载异步反应组件
【发布时间】：2018-02-26 04:11:30
【问题描述】：

我一直在寻找一个很好的解决方案，无需 Webpack 导入、System.import、require.ensure 就可以在匹配的路由上按需加载异步反应组件...

我想在客户端代码中避免 Webpack 足迹。

在服务器上，我获取所有路由并将匹配的位置呈现为静态 HTML/JS。就像经典的 SSR。

我的解决办法是：

使用 Webpack 将异步组件打包到静态包（c1.js、c2.js、...）
Store Map for Routes => async Components as json ("/path" => c1.js)
通过 ajax 请求 React-Rroute(RR4) 与参数 wrap=true 匹配的路径
如果路由存在，并且参数wrap=true在服务器上渲染c1.js以从数据库中获取数据（通用ajax）
将数据和原始 c1.js 包装为脚本响应
将响应作为脚本子级附加到正文或父级 React 组件 Dom
脚本解包数据和代码，存储它们（例如 Redux）并将异步组件（c1.js）附加/渲染到 React Dom

这样我有一个小的入口文件，并且可以：

请求路由https://host并按需加载组件（/路径）
在入口处请求路由https://host/path 并渲染完整的组件（无异步）
使用 RR4 请求路由 https://host/path 并获取和呈现异步组件
像 2 一样重新加载页面。
使用浏览器历史记录（后退）而不请求数据或组件（都存在于 Redux 存储和脚本标签中）
能够使用分页组件（加载更多数据并重用获取的组件）

我对此的看法：
将异步组件直接渲染到 Dom，而不是将它们缓存在脚本标签中，卸载父组件时会丢失组件代码（因为 main.bundle.js 中不存在异步组件）

问题：

是否有经过验证的方法来处理异步组件加载（仅 React 代码，没有 Webpack hacky 导入）并能够通用渲染？
将 React 代码拆分到独立的包中是不好的做法吗？
```
`<script src=bundle.js /><script>*c1.js* code</script>`
```
appand 脚本标签来响应组件 dom 是不好的做法吗（如 <App/> 或 <Home/>）
- HMR 怎么样（可能有副作用）？

【问题讨论】：

标签： reactjs webpack server-side-rendering code-splitting

【解决方案1】：

我不明白为什么您必须在客户端代码中使用任何特定于 Webpack 的代码？以下来自名为react-loadable 的库。您可以做的唯一特定于 Webpack 的 hack 是在导入附近放置一个特定于 Webpack 的注释，以使其使用指定的名称。

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

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

这是我建议您在想要进行代码拆分时开始使用的库。特别是如果您还想做 SSR。它有一些实用程序类可以帮助您。

【讨论】：