SSR загружаемых компонентов - имена чанков в файле статистики сервера отличаются от файла статистики клиента

Я пытаюсь настроить загружаемые компоненты для приложения CRA без извлечения SSR. Я использую Craco для переопределения конфигурации Webpack, и, похоже, он работает, поскольку на стороне клиентаloadable-stats.jsonсоздается. Когда я запускаю команду сборки, чанки называются на основе идентификатора, как я полагаюreact-scriptsжестко запрограммирован для работы в производственном режиме. Поэтому для конфигурации моего сервера я решил также называть блоки по идентификатору. Но, к сожалению, chunkNames, похоже, являются путем к модулям в файле статистики сервера, который генерируется@loadable/webpack-plugin, а не id. Фактические чанки названы по id, но я вижу их в папке.

Вот мой код в server.js где я пытаюсь читать отрывки.

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.

Моя конфигурация веб-пакета для сервера использует server.jsфайл, который содержит код Express в качестве точки входа, тогда как конфигурация Webpack для клиента имеет индексный файл для приложения в качестве входа. Я получаю пустой {} в качестве сервераrequireEntrypointрезультат. Я не совсем уверен, что должно произойти с этим вызовом, фактическая документация не очень ясна.

Некоторые люди используют webExtractor только в коде сервера, и он, похоже, работает для них, но я продолжаю получать сообщение об ошибке, поскольку он все еще пытается сопоставить фрагменты на стороне сервера, которые он не может найти в webExtractor.

Любая помощь будет оценена. Спасибо!

Источник

1 ответ

Это произошло потому, что я забыл включить @loadable/babel-pluginв мою конфигурацию Craco для сборки Webpack на стороне клиента. После этого работает нормально. Мой последнийcraco.config.js является:

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(),
 ]
} };

Теперь работает отлично.

Источник
Другие вопросы по тегам