reactjs - Webpack 4 - 名前/モジュール ID で SSR の非同期 'splitChunks' を取得する

Question

Webpack 4のreact-universal-componentの効果を模倣しようとしています。

TL;DR -クライアントが特定のルートで要求したすべての CSS/JS チャンクを含む SSR HTML レンダリングでダンプ<link>してタグ付けし、代わりにサーバーが同期的にロードする方法が欲しいです。<script>

react-loadableを使用すると、典型的な非同期 React コンポーネントは、サーバー バンドルとクライアント バンドルの両方で次のようになります。

const Logo = loadable({
  loader: () => import("./logo/logo"),
  loading: ()  => <div>Loading...</div>,
  modules: ["./logo/logo"],
  webpack: () => [(require as any).resolveWeak("./logo/logo")],
});

サーバーでは<Loadable.Capture>、ルートのレンダリングに使用されるモジュール名を取得するために使用しています。

// Modules used to render this route
const modules: string[] = [];

// Generate the HTML from our React tree.
const components = (
  <Loadable.Capture report={moduleName => modules.push(moduleName)}>
    <StaticRouter location={ctx.request.url} context={routeContext}>
      <Root />
    </StaticRouter>
  </Loadable.Capture>
);

これは正常に機能します-modulesルート/logoには次が含まれます：

['./ロゴ/ロゴ']

私が今しなければならないことは、どうにか./logo/logoして Webpack 統計情報 (サーバー環境でミドルウェアに渡される変数として、または Webpack によって生成された静的 JSON ファイルとして利用可能) を見つけて、それを生成されたチャンクに関連付けることです。呼び出しによって返されるモジュール ID ... または (できれば)インポート名require.resolveWeak()に直接。./logo/logo

これは私が立ち往生しているところです。上記の「ユニバーサル コンポーネント」NPM モジュールはいずれも Webpack 4 と互換性がなく、以前の CommonChunksPlugin に依存していた手法は廃止されました。

に渡された文字列に基づいて関連するチャンク ファイル名を見つけるために Webpack 統計を消費する例はどこにありますimport()か?