首页 文章

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

提问于
浏览 次
0

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

我想 avoid Webpack footprints in client-side code .

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

我的解决方案是：

  • 使用Webpack将异步组件打包到静态包（c1.js，c2.js，...）

  • 存储路由映射=> async组件为json（"/path" => c1.js）

  • 请求React-Rroute（RR4）匹配路径与param wrap=true over ajax

  • 如果路由存在，并且param wrap=true 在服务器上渲染c1.js以从DB获取数据（通用ajax）

  • 将数据和原始c1.js包装为脚本响应

  • 在主体或父React Component Dom处作为脚本子句追加响应

  • 脚本解包数据和代码，存储它们（例如Redux）并将/ async组件（c1.js）追加到React Dom

This way i have a small entry file and could:

  • 请求路由 https://host 并按需加载组件（/路径）

  • 请求路由 https://host/path on entry和render compleate components（no async）

  • 请求路由 https://host/path 与RR4和获取并呈现异步组件

  • 重新加载页面，如2 .

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

  • 能够使用具有分页的组件（加载更多数据并重用已获取的组件）

My thoughts on this:
将异步组件直接呈现给Dom而不是将它们缓存在脚本标记中将丢失卸载父组件上的组件代码（因为main.bundle.js中不存在异步组件）

问题：

  • 是否有经过验证的方法来处理异步组件加载（ React code only 且没有 Webpack hacky imports ）并且能够呈现通用？

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

`<script src=bundle.js /><script>*c1.js* code</script>`

  • appand脚本标签对组件dom做出反应（如 <App/> 或 <Home/> ）是不好的做法

  • 关于HMR（可能是副作用）怎么样？

reactjs webpack serverside-rendering code-splitting

1 回答

  • 0

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

    回复于

相关问题