代码分割/预加载内容，而用户正在浏览？

使用像Webpack这样的工具，我们可以启用代码分割，并只在需要时异步加载我们的应用程序代码。

在具有react-router的反应应用程序环境中的示例。

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)

我希望这是有道理的

---

是的，你可以做到这一点 。 我将展示其中一种可能的解决方案。

首先让我们创建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秒后启动弹出队列或组块数组）。

接下来，你必须在排队函数backgroundLoader注册你的require.ensure ：

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上看到这个例子的完整代码（你可以查看网络，看看块是如何在后台加载的）

链接地址: http://www.djcxy.com/p/36043.html

上一篇: Code Splitting / Preloading Content while user is browsing?

下一篇: Efficiently construct GRanges/IRanges from Rle vector