问题描述
我正在尝试为 SSR 未弹出的 CRA 应用程序设置可加载组件.我正在使用 Craco 来覆盖 Webpack 配置,它似乎正在工作,因为正在生成客户端 loadable-stats.json
.当我运行 build 命令时,块是根据 id 命名的,因为我相信 react-scripts
是硬连接的,可以在生产模式下运行.因此,对于我的服务器配置,我也决定按 id 命名块.但不幸的是,chunkNames 似乎是服务器统计文件中模块的路径,它是由 @loadable/webpack-plugin
生成的,而不是 id.实际的块以id"命名,但我可以在文件夹中看到它们.
I am trying to set up loadable-components for an SSR un-ejected CRA app. I'm using Craco to override Webpack config and it seems to be working, as the client side loadable-stats.json
is being generated. When I run the build command, the chunks are named based on id, as I believe react-scripts
is hard-wired to run in production mode. So for my server config, I decided to name the chunks by id too. But unfortunately the chunkNames seem to be the path to the modules in the server stats file, which is generated by the @loadable/webpack-plugin
, rather than id. The actual chunks are named by 'id` though, I can see them in the folder.
这是我在 server.js
中尝试读取块的代码.
Here is my code in server.js
where I'm trying to read the chunks.
const nodeStatsFile = path.resolve(__dirname, 'node-stats.json');
const nodeExtractor = new ChunkExtractor({ statsFile: nodeStatsFile, entrypoints: ["server"] });
const nodeEntryPointResult = nodeExtractor.requireEntrypoint("server"); // ==> {}
const webStatsFile = path.resolve(__dirname, '../web-stats.json');
const extractor = new ChunkExtractor({ statsFile: webStatsFile });
const client = generateApolloClient();
const app = (<ApolloProvider client={client}>
<HelmetProvider context={helmetContext}>
<Router location={req.url} context={staticContext}>
<CookiesProvider cookies={req.universalCookies}>
<App />
</CookiesProvider>
</Router>
</HelmetProvider>
</ApolloProvider>);
getDataFromTree(app).then(() => {
const jsx = nodeExtractor.collectChunks(app);
const content = ReactDOMServer.renderToString(jsx);
const state = client.extract();
const { helmet } = helmetContext;
const html = ReactDOMServer.renderToString(
<Html content={content} helmet={helmet} assets={assets} extractor={extractor} />,
);
res.status(staticContext.status || 200);
res.send(`<!doctype html>${html}`);
res.end();
})
因此,当我运行 nodeExtractor
(从服务器统计文件中读取)以 collectChunks 然后 webExtractor
(使用客户端统计文件)到 getScriptElements
我得到一个可加载块的空数组.如果我只使用 webExtractor
它会抛出一个错误 chunkNameFromServerStatsFile not found
.
Due to this, when I run the nodeExtractor
(which is reading from the server stats file) to collectChunks and then webExtractor
(which is using the client stats file) to getScriptElements
I get an empty array of loadable chunks. If I only use the webExtractor
it throws an error that chunkNameFromServerStatsFile not found
.
我的服务器 webpack 配置使用包含 Express 代码的 server.js
文件作为入口点,而客户端的 Webpack 配置将应用程序的索引文件作为入口.我得到一个空的 {} 作为服务器 requireEntrypoint
结果.我不确定那个电话会发生什么,实际的文档不是很清楚.
My webpack config for the server is using the server.js
file, which contains the Express code, as the entry point, whereas the Webpack config for the client has the index file for the app as the entry. I get an empty {} as the server requireEntrypoint
result. I'm not really sure what is supposed to happen with that call, the actual documentation is not very clear.
有些人也只在服务器代码中使用 webExtractor
并且它似乎对他们有用,但我一直收到错误,因为它仍在尝试映射服务器端块,它在 webExtractor
中找不到.
Some people are using the webExtractor
only in the server code as well and it seems to be working for them, but I keep getting an error as it's still trying to map the server-side chunks, which it cannot find in the webExtractor
.
任何帮助将不胜感激.谢谢!
Any help will be greatly appreciated. Thanks!
推荐答案
所以发生这种情况是因为我忘记将 @loadable/babel-plugin
包含到我的 Craco 配置中,用于客户端网络包构建.我这样做后工作正常.我最终的 craco.config.js 是:
So this was happening because I forgot to include the @loadable/babel-plugin
into my Craco config, for the client-side Webpack build. Works fine after I did that. My final craco.config.js
is:
const LoadablePlugin = require('@loadable/webpack-plugin');
module.exports = {
babel: {
plugins: ["@loadable/babel-plugin"]
},
webpack: {
mode: "development",
configure: {
output: {
filename: '[name].js',
chunkFilename: 'static/js/[name].js',
},
},
plugins: [
new LoadablePlugin(),
]
} };
现在完美运行.
这篇关于可加载组件 SSR - 服务器统计文件中的块名称与客户端统计文件不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!