Reactjs 在服务器端渲染中,如何将动态webpack bundle.js名称注入初始HTML渲染组件?
我正在转换一个纯客户端渲染的React Redux项目,以包括服务器端渲染。 根据reduxJS手册(),将初始组件HTML和初始状态注入到要在客户端呈现的模板中的典型样板函数如下所示:Reactjs 在服务器端渲染中,如何将动态webpack bundle.js名称注入初始HTML渲染组件?,reactjs,webpack,react-redux,server-side-rendering,Reactjs,Webpack,React Redux,Server Side Rendering,我正在转换一个纯客户端渲染的React Redux项目,以包括服务器端渲染。 根据reduxJS手册(),将初始组件HTML和初始状态注入到要在客户端呈现的模板中的典型样板函数如下所示: function renderFullPage(html, preloadedState) { return ` <!doctype html> <html> <head> <title>Redux Universa
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>
`
}
如何将这些文件“动态”注入到上面的renderFullPage()函数中,替换
标记
使用HtmlWebpackPlugin模板在这里似乎不是一个选项。您应该使用此软件包:
以脚本的形式导入到html中最小的一个,例如,使用spinner,在可加载完成下载最终捆绑后,更改组件。好吧,因此毫不奇怪,将纯客户端React应用程序转换为SSR React应用程序并不像我想象的那样简单。有很多事情要考虑,很难找到一个教程,它给出了服务器端渲染的一个很好的概述。 然而,现在有一个在UDEMY,我真的可以推荐。这是迄今为止我为SSR初学者找到的最全面(或唯一)的一个:
谢谢Ortee的回复!React Loadable对于基于组件的代码拆分来说似乎很棒,但在我的项目中,这意味着要完全重新编程。但是,我的多个捆绑文件只是分离供应商库的结果。因此,我希望有一个更简单的解决方案,在这一点上不需要我切换到基于组件的代码拆分。
/bundle.32528d8bc783fafd2585.js
/vendor.29ce638d0bba925f3e21.js
/vendor2.da60e4a86c0ac5f28a03.js