1

我已经尝试了一段时间,但无济于事,让我的配置适用于具有以下特征的应用程序:

  1. 打字稿
  2. 反应
  3. 使用可加载组件的服务器端渲染
  4. 网页包

出于某种原因,这个片段,它应该找到在服务器端渲染期间使用的所有块,它不起作用:

server.get("*", (req, res, next) => {
    const extractor = new ChunkExtractor({ statsFile });
    ...
    const tsx = extractor.collectChunks(
        <ChunkExtractorManager extractor={extractor}>
            <StaticRouter location={req.url}>
                <App data={data}/>
            </StaticRouter>
        </ChunkExtractorManager>
    );
    console.log(extractor.getScriptTags()); // prints server.js bundle but this isn't correct
});

它返回的是server.js捆绑包而不是所需的客户端/供应商捆绑包。我没有在此处发布所有代码,而是将所有代码推送到我在 github 上的分支:https ://github.com/markdstevens/ssr-ts-react-webpack-boilerplate/tree/ssr-with-code-splitting

我必须在 webpack 或可加载组件中缺少一些配置,但我到处寻找,似乎找不到问题。任何提示都将受到欢迎。谢谢!

4

1 回答 1

1

发现问题。在我的 webpack 配置中,我的服务器配置中有这个:

import * as LoadablePlugin from '@loadable/webpack-plugin';
...
{
  entry: './src/server/app.tsx',
  target: 'node',
  externals: [nodeExternals()],
  output: {
    filename: 'server.js',
  },
  plugins: [
    new LoadablePlugin()
  ]
}

LoadablePlugin为了让一切正常工作,我还必须将其添加到我的客户端配置中。

于 2019-12-22T21:58:14.240 回答