Я пытался использовать реагирующую загружаемую библиотеку с Webpack 4.
На SSR страница загружена корректно (загружены все данные асинхронного импорта).
Однако асинхронные компоненты исчезли на долю секунды.
Похоже, что response-loadable.json не имеет правильной информации, поскольку не получает все необходимые фрагменты для страницы (как-то правильно отображается на стороне сервера). Когда я усыпляю console.log, появляются только несколько чанков.
Может ли это быть, потому что какой-то маршрут является динамическим?
Пожалуйста, посмотрите на скриншот ниже
Инициируется сценарием для повторной загрузки
Разбор происходит на стороне сервера, а сценарий - на стороне клиента
Как я собираю требуемые куски из реактива loadable.json
renderToString(
<Provider store={store}>
<StaticRouter location={urlPath} context={context}>
<Loadable.Capture report={moduleName => {modules.push(moduleName)}}>
<AppRoot/>
</Loadable.Capture>
</StaticRouter>
</Provider>
)
console.log('last', getBundles(stats, modules))
Prod Server
Loadable.preloadAll().then(() => {
app.listen(PROD_PORT, (error) => {
})
});
Клиентская сторона
Loadable.preloadReady().then(() => {
hydrate(
<Provider store={store}>
<ConnectedRouter history={history}>
<AppRoot />
</ConnectedRouter>
</Provider>,
domRoot,
)
})
Настройка Split Chunks
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
},
vendors: {
name: 'vendors',
chunks: 'all',
reuseExistingChunk: true,
priority: 20,
enforce: true,
test(module, chunks) {
const name = module.nameForCondition && module.nameForCondition();
return chunks.some(chunk => {
return chunk.name === 'main' && /[\\/]node_modules[\\/]/.test(name);
})
}
},
common: {
name: 'app.js',
chunks: 'initial',
test: /\.js$/,
reuseExistingChunk: true,
},
Я хотел бы предоставить больше информации, если это необходимо