如何将动态webpack bundle.js名称注入到服务器端呈现中的初始HTML呈现响应组件中？

问题描述：

我正在将纯粹客户端渲染的React-Redux项目转换为包含服务器端渲染。按照reduxJS手册（http://redux.js.org/docs/recipes/ServerRendering.html），该喷射初始部件HTML和初始状态到在客户端上被呈现的模板的典型样板函数看起来像这样：如何将动态webpack bundle.js名称注入到服务器端呈现中的初始HTML呈现响应组件中？

function renderFullPage(html, preloadedState) { 
    return ` 
    <!doctype html> 
    <html> 
     <head> 
     <title>Redux Universal Example</title> 
     </head> 
     <body> 
     <div id="root">${html}</div> 
     <script> 
      // WARNING: See the following for security issues around embedding JSON in HTML: 
      // http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations 
      window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')} 
     </script> 
     <script src="/static/bundle.js"></script> 
     </body> 
    </html> 
    ` 
}

所以，很显然在的端部函数脚本标记包含客户端应用程序的bundle.js文件。

这里我的问题是：如果我的WebPack不能简单地创建一个单一的bundle.js而是输出一组的包文件动态文件通过CommonsChunkPlugin命名，如：

/bundle.32528d8bc783fafd2585.js 
/vendor.29ce638d0bba925f3e21.js 
/vendor2.da60e4a86c0ac5f28a03.js

将如何我“动态”将这些文件注入上面的renderFullPage（）函数，替换<script src="/static/bundle.js"></script>标记？

使用HtmlWebpackPlugin模板在这里似乎不是一个选项。

答

那么，毫不奇怪，事实证明，将纯粹的客户端React应用程序转换为SSR React应用程序并不像我想象的那么简单。有很多事情要考虑，很难找到一个教程，可以很好地概述服务器端渲染。但是，现在在UDEMY上有一个我可以真正推荐的。这是最（或仅）一个全面到目前为止，我已经找到了SSR初学者：

https://www.udemy.com/server-side-rendering-with-react-and-redux

答

你应该使用这个包：https://github.com/thejameskyle/react-loadable 作为脚本导入html最小的一个与微调例如，当可装载完成下载最终捆绑，更改组件。

感谢，Ortee您的回复！ React-Loadable似乎很适合做基于组件的代码分割，但如果我的项目需要完全重新编程。但是，我的多个捆绑包文件只是分离供应商库的结果。所以我希望有一个更简单的解决方案，不需要我切换到基于组件的代码分割。 – uess

如何将动态webpack bundle.js名称注入到服务器端呈现中的初始HTML呈现响应组件中？

相关推荐