CRA SSR的资产分块加载

Question

我正在尝试将我的资产分块并使用react-loadable延迟加载它们。

我使用了以下renderToString：

renderToString(
  <Loadable.Capture report={m => modules.push(m)}>
    <Provider store={store}>
      <StaticRouter location={req.url} context={context}>
        <Frontload isServer={true}>
          <App />
        </Frontload>
      </StaticRouter>
    </Provider>
  </Loadable.Capture>
)

然后，我尝试提取块，如下所示：

const extractAssets = (assets, chunks) =>
  Object.keys(assets)
    .filter(
      asset => chunks.indexOf(asset.replace('.js', '')) > -1
    )
  .map(k => assets[k]);
// Let's format those assets into pretty <script> tags
const extraChunks = extractAssets(manifest, modules).map(
  c =>
    `<script type="text/javascript" src="/${c.replace(
      /^\//,''
    )}"></script>`
  );

它基于https://github.com/mnsht/cra-ssr中的代码

不过，提取资产对我不起作用。资产清单的Object.keys()返回files和entrypoints。

以下是实际资产清单：

{
  files: {
    'main.css': '/static/css/main.f975a44f.chunk.css',
    'main.js': '/static/js/main.a2b23f82.chunk.js',
    'runtime-main.js': '/static/js/runtime-main.904d5b6d.js',
    'static/js/2.729d59f7.chunk.js': '/static/js/2.729d59f7.chunk.js',
    'static/js/3.12786515.chunk.js': '/static/js/3.12786515.chunk.js',
    'static/css/4.54cc97ef.chunk.css': '/static/css/4.54cc97ef.chunk.css',
    'static/js/4.3864c0a5.chunk.js': '/static/js/4.3864c0a5.chunk.js',
    'static/css/5.414892ae.chunk.css': '/static/css/5.414892ae.chunk.css',
    'static/js/5.19ce5aa6.chunk.js': '/static/js/5.19ce5aa6.chunk.js',
    'static/css/6.0b084d33.chunk.css': '/static/css/6.0b084d33.chunk.css',
    'static/js/6.a557fa17.chunk.js': '/static/js/6.a557fa17.chunk.js',
    'static/css/7.419cd89c.chunk.css': '/static/css/7.419cd89c.chunk.css',
    'static/js/7.42da3d59.chunk.js': '/static/js/7.42da3d59.chunk.js',
    'static/js/8.0fe13e82.chunk.js': '/static/js/8.0fe13e82.chunk.js',
    'index.html': '/index.html',
    'precache-manifest.abc91afd89c3af36afab7f06346ceb0d.js': '/precache-manifest.abc91afd89c3af36afab7f06346ceb0d.js',
    'service-worker.js': '/service-worker.js',
    'static/js/2.729d59f7.chunk.js.LICENSE.txt': '/static/js/2.729d59f7.chunk.js.LICENSE.txt',
    'static/js/3.12786515.chunk.js.LICENSE.txt': '/static/js/3.12786515.chunk.js.LICENSE.txt',
    'static/media/index.module.scss': '/static/media/sm_logo_62.ccbdb246.svg',
    'static/media/default.png': '/static/media/default.0866d697.png'
  },
  entrypoints: [
    'static/js/runtime-main.904d5b6d.js',
    'static/js/3.12786515.chunk.js',
    'static/css/main.f975a44f.chunk.css',
    'static/js/main.a2b23f82.chunk.js'
  ]
}

我的块是我试图加载的模块的路径。例如，在我的应用程序中，有：

const LoadableCategories = Loadable({
  loader: () => import('../categories'),
  loading: <Loading />
});

和

<Route path='/categories' component={LoadableCategories} />

我的模块里面应该有../categories。由于某些原因，我的模块路径实际上是[ '../categories', '../categories' ]的两倍。

尽管如此，按照现在的方式编写extractAssets，extraChunks始终是[]。因此，我丢失了块，异步加载不起作用。

请给我建议。

Answer 1

我的可加载组件定义不正确。工作版本如下所示。

const LoadableCategory = Loadable({
  loader: () => import('../category'),
  loading() {
    return <div>Loading...</div>;
  }
});