9

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)

これが理にかなっていることを願っています

4

1 に答える 1

3

はい、これを達成できます。可能な解決策の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で確認できます (ネットワークをチェックして、チャンクがバックグラウンドでどのようにロードされているかを確認できます)。

于 2016-08-30T07:59:24.067 に答える