我正在尝试对我的资产进行分块，然后使用进行延迟加载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是永远[]。因此，我缺少块，异步加载不起作用。
请指教。
我的可加载组件定义不正确。工作版本如下。
const LoadableCategory = Loadable({
loader: () => import('../category'),
loading() {
return <div>Loading...</div>;
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句