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() 用于资产清单 returns 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>;
  }
});

CRA SSR 的资产分块加载

Chunked loading of assets for CRA SSR

reactjs

server-side-rendering

create-react-app

react-loadable