0

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

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

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

我的解决方案是：

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

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

  1. 按需请求路由https://host和加载组件（/path）
  2. 在入口处请求路由https://host/path并渲染完整的组件（无异步）
  3. 使用 RR4请求路由https://host/path并获取和呈现异步组件
  4. 像2一样重新加载页面。

  5. 使用浏览器历史记录（后退）而不请求数据或组件（都存在于 Redux 存储和脚本标签中）

  6. 能够使用分页组件（加载更多数据并重用获取的组件）

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

问题：

  • 是否有一种经过验证的方法来处理异步组件加载（仅 React 代码且没有Webpack hacky 导入）并能够通用渲染？

  • 将反应代码拆分到独立包上是不好的做法吗？

    `<script src=bundle.js /><script>*c1.js* code</script>`
  • 附加脚本标记以响应组件 dom 是不好的做法（如<App/>或<Home/>）
    • HMR 怎么样（可能有副作用）？
4

1 回答 1

0

我不明白为什么您必须在客户端代码中使用任何 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。它有一些实用程序类可以帮助您。

于 2018-02-16T09:30:16.260 回答