Javascript 网页代码分裂导致路线改变时动画跳跃？

因此，我使用代码拆分将我的（相当大的）应用程序拆分为可管理的块，如下所示：

const getSettings = (nextState, cb) => {
  require.ensure([], require => {
    cb(null, require('../containers/Settings/Settings'))
  }, 'settings')
}

这可能是一种让Webpack在某些点上拆分的非常基本的方法，但到目前为止，它对我很有效

然而，我遇到了严重的挫折。因为这些区块必然是异步的，当进入依赖于未获取区块的路由时，实际路由会发生变化（通过

react router

），但实际子组件更新需要几秒钟，因此会留下一个起伏的动画

我如何才能强制

反应路由器

在加载所有必需的块之前不触发

位置更改

---

我正在使用

react router 3.0.0

和

webpack 1.13.2

我在使用

require时遇到了同样的问题。请确保
使用
getComponent
使用react router 3。我的解决方案看起来很肮脏，但确实有效。我在一些地方预先获取了一个组件包，这样当它们被实例化时，它们就可以用于路由了

这只是一个
需要的功能。请确保导入并执行组件。仍然可以减少你的初始负荷，我认为这是一个目标
 因此，正如预期的那样，社区关于这样一个利基问题的文档/信息非常少

我绕过它的方式比预期的要简单：我只是在我的顶级
应用程序
子组件中倾听更改，而不是路由更改，因为路由更改不可信

看起来是这样的：

<FadeProps animationLength={40}>
  <main style={styles.appContent} key={children.type.displayName}>
    {route.status === 200 && children}
    {route.status === 404 && <NotFound />}
  </main>
</FadeProps>


{route.status==200&&children}
{route.status==404&&}

注意，键是
this.props.children.type.displayName
，它只有在加载块并且组件可用时才会实际更改。我注意到在新的路由位置有2-4个带有旧组件的渲染，因此子级是唯一可以信任的数据。
oops！太酷了@AbdennourTOUMI什么？给人留下深刻印象的是，你正在使用哪个版本的react路由器？当前版本（v.2、v.3）中有您可能应该使用的/getComponents（）API。下一个版本（v.4-似乎是在测试版，即将发布）是一个不同的野兽-还没有找到它。另外，我从标签中假设您使用的是Webpack v.1而不是v.2。@NikosParaskevopoulos我使用的是
react router 3.0.0
和
Webpack 1.13.2
。
getComponent
函数确实获得了一个异步组件，但只有在调用
LOCATION\u CHANGE
之后，我才知道位置更改是否需要数据（块）获取……嗯，我认为这不是一个好的解决方案。“我的身份验证要求”区域涉及一个50%的用户永远不需要的重脚本（300kb）。一定有办法让
react router
调用
LOCATION\u CHANGE
以异步方式…我相信我找到了一个解决我自己的动画问题的方法，不确定它是否有帮助，但请随意查看。