비동기 경로에 대한 프리 페치 리소스

Question

비동기 경로를 프리 페치 또는 미리로드하는 방법이 있습니까? 지금 RR2/3로이 작업을 수행하는 방법을 모색 중입니다. 기본적인 아이디어는 모든 경로에서 코드 분할이지만, 해당 페이지를 방문하기 전에 서비스 작업자의 연결된 페이지에 대한 번들을 캐시 할 수 있기를 바랍니다. 그래서 제가하고 싶은 것은 사용자 정의 <Link>입니다. 렌더링 할 때마다 링크 된 페이지의 리소스를 캐시하려고 시도합니다. 이렇게하면 페이지 전환이 훨씬 빨라집니다. 내가 모르는 것은 자원을 가져올 수 있도록 경로 탐색을 에뮬레이트하는 방법이 있는지 여부입니다. 이 API 또는 누군가를 생각할 수있는 일종의 까다로운 방법이 있습니까?

Answer 1

링크가 장착 된 시간 제한에서 require.ensure... 섹션 만 수행 할 수 있습니다. 코드 분할이 필요하고 비동기 적으로로드해야합니다. 시간 초과로 인해 파일이 별도의 파일에로드됩니다.

RR3에서 코드 분할을 위해 RR4를 사용하는 것이 좋습니다. 자식 경로가 변경되면 비동기 필수 경로가 다시 포함되고 다시 렌더링됩니다. 필자의 경우, 하위 라우트 변경을 위해 내 라우트의 구성 요소 WillMount가 실행되었습니다. 예 : /agent/step-1에서 /agent/step-2으로 이동하면 /agent의 구성 요소가 마운트 해제되고 다시 마운트됩니다.

Answer 2

이것은 내가 생각해 낸 것입니다. 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