reactjs - SSR 中请求的路由的双脚本标签

Question

我使用 webpack 捆绑了我的 SSR 存储库(类似 inferno-react 的 lib)。它有 2 个路由文件，1 个用于服务器，1 个用于客户端，完全相同，但使用 require.ensure 在客户端进行分块。其中一条路线如下所示:

<Route path="/home" getComponent={(props, cb) => {      
  require.ensure([], require => cb(null, 
  require('../views/containers/Home').default), 'home');
}}/>

意思是，当浏览器解析 .html 并在浏览器上下载 bundle.js 时，webpack 将然后插入该分块路由的组件的 .js 脚本标签转换为 html，然后它将被下载。但这会减慢速度，因为该路由的 .js 仅在下载 bundle.js 之后才下载......因此，我手动从服务器添加脚本标记在 webpack-manifest-plugin 的帮助下动态请求的 block 路由。但是，现在，对于每个请求的路由，我在该分块组件的 .html 文件中都有两个脚本标记。一种是由于在服务器上手动添加，另一种是我们使用 require.ensure 在 webpack 中创建 block 时造成的。

一切正常，但是 2 个脚本标签很好! :/

有没有办法可以避免它，或者我还能如何处理它，同时将分块保留在客户端。

Answer 1

如果您不想异步加载 block ，那么我会删除 require.ensure 并简单地使用 require，以便代码包含在您的 main 中捆。那么除了主包包含之外，您不需要任何脚本标签。

否则，如果您想要分块以便分隔不同页面的代码，请使用第二个入口点而不是自动生成的 block 。