几个月前,我使用react-router成功构建了一个带有异步组件的spa应用程序 .
但是当我第一次打开页面时它太慢了(因为资源的大小,即使代码分割和异步加载)
现在重要的是让它成为第一个渲染的速度 .
根据api文档完成服务器端渲染工作后出了点问题 . 当我打开我的页面时,警告如下:
(client) " data-reactid="1"><!-- react-empty: 2 -
(server) " data-reactid="1"><div class="Detail_mo
并且在真实渲染之间发生闪光 .
认为它是由异步组件引起的(在react-router的第一次渲染之后完成) .
现在我删除组件的异步加载器,然后一切都成真,没有任何警告!
Routes.js
module.exports = {
path: '/',
getChildRoutes:(location,callback)=>{
callback(null,[
{
path: 'item.html',
getComponent: (nextState, cb)=>{
console.log('Detail start')
const Detail = require('react-router-proxy?name=item!../detail/dev/js/detail/container/RootContainer')
cb(null,Detail)
}
},
{
path: 'home',
getComponent: (nextState, cb)=>{
const Home = require('react-router-proxy?name=home!../home/dev/js/container/RootContainer');
cb(null,Home)
}
},
{
path: 'user',
component: require('react-router-proxy?name=user!../home/dev/js/container/RootContainer')
},
]);
}
};
如果可以为initComponent设置异步和动态组件,或者让react-router在异步组件回调之后开始渲染(这是关于第一次屏幕渲染),我可以解决这个问题 .
谢谢!