코드 분할/미리로드 사용자가 탐색하는 동안 콘텐츠가 있습니까?

Question

Webpack과 같은 도구를 사용하면 코드 분할을 활성화하고 에만 응용 프로그램 코드를 비동기 적으로로드 할 수 있습니다.

반응 라우터를 이용한 반응 애플리케이션의 예.

Load initial page. 

-> go to new route 
---> webpack loads in the component file required asynchronous. 

Webpack은 요청을 시작하기 위해 코드가 필요할 때까지 기다립니다.

제 질문은 일단 기본 응용 프로그램 코드가로드되면 사용자가 새 경로로 전환하기 전에도 나머지 코드를로드 할 수 있습니까?

내보기는 사용자가 webpack 청크가 다운로드 될 때까지 기다리지 못하게합니다.

-> Load initial page 
--> user sitting idle or browsing on home page 
----> Start loading application code for rest of the application 
---> user goes to new route (faster UX because code has already download in the background) 

나는이 감각

Answer 1

예이을 달성 할 수 있기를 바랍니다. 가능한 해결책 중 하나를 보여 드리겠습니다. - 예를 들어 한 후 실시 예 5 초 셔플을위한 큐 터지는 시작

이

const queue = []; 
const delay = 1000; 

let isWaiting = false; 

function requestLoad() { 
    if (isWaiting) { 
     return; 
    } 
    if (!queue.length) { 
     return; 
    } 
    const loader = queue.pop(); 
    isWaiting = true; 
    loader(() => { 
     setTimeout(() => { 
     isWaiting = false; 
     requestLoad(); 
     }, delay) 
    }); 
} 

export default (loader) => { 
    queue.push(loader); 
    requestLoad(); 
} 

이 기능을 1 초 지연 배경에 청크를로드

(당신이 그것을 조정할 수 있습니다

첫째의 필요 덩어리를 대기 위해 backgroundLoader을 만들 수 있습니다 청크 배열). 당신이 해결 기능을 포함 render 기능을 통과하면 switch 문에 덩어리를 요구하면

import render from './render'; // not relevant in this example 
import backgroundLoader from './backgroundLoader'; 

let lightTheme = (cb) => { 
    require.ensure([],() => { 
    cb(require('./themeA.css')); 
    }, 'light'); 
} 

let darkTheme = (cb) => { 
    require.ensure([],() => { 
    cb(require('./themeB.css')); 
    }, 'dark'); 
} 

let pinkTheme = (cb) => { 
    require.ensure([],() => { 
    cb(require('./themeC.css')); 
    }, 'pink'); 
} 
backgroundLoader(lightTheme); 
backgroundLoader(darkTheme); 
backgroundLoader(pinkTheme); 

export default (themeName) => { // router simulation 
    switch(themeName) { 
    case 'light': 
     lightTheme(render); 
     break; 
    case 'dark': 
     darkTheme(render); 
     break; 
    case 'pink': 
     pinkTheme(render); 
     break; 
    } 
}; 

:

다음 당신은 당신의 require.ensure을 기능 backgroundLoader 대기열에 등록해야합니다. backgroundLoader에서이 함수는 비어있어 덩어리가 앱의 head에로드됩니다. 당신이 WebpackBin에서 볼 수있는이 예를 들어

전체 코드 (당신이 덩어리가 배경에로드되는 방식을 볼 수 네트워크를 확인하실 수 있습니다)