我的解决方案是：

Question

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

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

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

我的解决方案是：

将带有Webpack的异步组件打包到静态捆绑包（ c1.js ，c2.js，...）
路线存储地图=＆gt; async组件为json（＆＃34; / path＆＃34; =＆gt; c1.js ）
通过ajax请求React-Rroute（RR4）匹配的路径与参数wrap=true
如果路由存在，并且param wrap=true在服务器上呈现 c1.js 以从DB获取数据（通用ajax）
将数据和原始 c1.js 换行为脚本响应
在主体或父级React Component Dom
脚本解包数据和代码，存储它们（例如Redux）并追加/渲染异步组件（ c1.js ）到React Dom

这样我有一个小的输入文件，可以：

请求路由https://host并按需加载组件（/路径）
请求路由https://host/path和渲染补充组件（无异步）
使用RR4请求路由https://host/path并获取并呈现异步组件
重新加载页面，如2。
使用浏览器历史记录（后退）而不请求数据或组件（Redux存储和脚本标记中都存在）
能够使用具有分页功能的组件（加载更多数据并重用已提取的组件）

我对此的看法：
将异步组件直接呈现给Dom而不是将它们缓存在脚本标记中将丢失卸载父组件上的组件代码（因为main.bundle.js中不存在异步组件）

的问题：

是否有经过验证的方法来处理异步组件加载（仅限反应代码且没有 Webpack hacky import ）并能够呈现通用？
将反应代码拆分为独立捆绑包是不好的做法？
```
`<script src=bundle.js /><script>*c1.js* code</script>`
```
app和脚本标签对组件dom做出反应（如<App/>或<Home/>）是不好的做法
- 关于HMR（可能是副作用）怎么样？

Answer 1

我不明白为什么你必须在客户端代码中使用任何特定于Webpack的代码？以下内容来自名为react-loadable的库。您可以执行的唯一特定于Webpack的操作是在导入附近放置一个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。它有一些实用程序类可以帮助您。

如何在没有使用SSR和RR4进行Webpack导入的情况下加载异步反应组件

我的解决方案是：

的问题：

1 个答案: