Кодовое разделение/предварительная загрузка содержимого во время просмотра пользователем?

Question

С помощью таких инструментов, как Webpack, мы можем включить разделение кода, и только загрузите наш код приложения асинхронно, если это необходимо.

Пример в контексте реагирующего приложения с реактивным маршрутизатором.

Load initial page. 

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

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

Да, вы можете достичь этого. Я покажу одно из возможных решений.

Во-первых, давайте создадим backgroundLoader для постановки в очередь необходимые ломти:

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-секундной задержки (вы можете настроить его - например, начать появляться очереди после того, как, например, 5 секунд или перетасовки массив кусков).

Далее вы должны зарегистрировать ваш require.ensure в очереди функции backgroundLoader:

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; 
    } 
}; 

После того, как вы требуете своего куска в switch заявления вы передаете render функцию, содержащих функцию рассосется. В backgroundLoader эта функция будет пустой, в результате чего загрузится кусок до head вашего приложения.

Полный код этого примера вы можете увидеть на WebpackBin (вы можете проверить сеть, чтобы посмотреть, как ломти загружаются в фоновом режиме)