Question

有预取或预加载异步路由的方法吗？我正在探索如何使用RR2 / 3立即执行此操作。基本思路是我在每条路线上拆分代码，但我希望能够在访问该页面之前为服务工作者中的连接页面缓存包。因此，我想要做的是拥有自定义<Link>，每次呈现时，它都会尝试缓存与其关联的网页的资源。这将使页面转换速度更快。我不知道的是，是否有一种模拟导航到路线的方法，以便获取资源。是否有这种或某种棘手的方法可以解决这个问题？

Answer 1

这就是我的想法。它是包装React Router Link组件并在componentDidMount中的组件（因此只在客户端而不是服务器上运行）检查是否在生产中（在开发期间不需要运行它）以及这是否是浏览器不支持 支持服务工作者（此检查特定于我的用例）。然后手动匹配该位置并调用任何异步getComponent函数。

import React from 'react'
import Link from 'react-router/lib/Link'

class GatsbyLink extends React.Component {
  componentDidMount () {
    // Only enable prefetching of Link resources in production and for browsers that
    // don't support service workers *cough* Safari/IE *cough*.
    if (process.env.NODE_ENV === 'production' && !('serviceWorker' in navigator)) {
      const routes = require('my-routes')
      const { createMemoryHistory } = require('history')
      const matchRoutes = require('react-router/lib/matchRoutes')
      const getComponents = require('react-router/lib/getComponents')

      const createLocation = createMemoryHistory().createLocation

      if (typeof routes !== 'undefined') {
        matchRoutes([routes], createLocation(this.props.to), (error, nextState) => {
          getComponents(nextState, () => console.log('loaded bundle(s) for ' + this.props.to))
        })
      }
    }
  }

  render () {
    return <Link {...this.props} />
  }
}

module.exports = GatsbyLink

Answer 2

安装链接时，您可以在超时时执行require.ensure...部分。这应该要求代码拆分并加载异步。超时将确保它被加载到一个单独的文件中。

我建议使用RR4进行代码分割，正如我在RR3中发现的那样，如果子路由发生变化，异步所需路由将被重新包含并重新呈现。在我的情况下，我的路由的componentWillMount被激活任何子路由更改。例如从/agent/step-1导航到/agent/step-2将导致/agent的组件卸载并重新安装。

预取异步路由的资源

2 个答案: