分块加载 CRA SSR 的资产

问题描述

我正在尝试分块我的资产并使用 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 始终为 []。因此，我缺少块并且异步加载不起作用。

请指教。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）