Webpack分块加载进度

Question

我需要在从服务器加载webpack代码块时显示进度条。 有没有简单的解决方案可以实现这一点？ 我希望已经存在某些插件可以做到这一点，但是通过谷歌的快速搜索并没有找到。

谢谢

- nutrina

---

很棒的问题。我知道回调函数的名称默认为webpackJsonP，所以你可以对其进行monkey-patch来找出何时完成，但其余部分都是在webpack的define函数/模块内部作用域中。 - Tom McKenzie

理想情况下，Webpack 可以为块加载状态提供事件 API，但您需要与 Webpack 核心开发者联系：https://github.com/webpack/webpack/issues - Tom McKenzie

这是一个基于XHR工作的插件，你可以尝试使用它：https://github.com/seleb/chunk-progress-webpack-plugin - Rajendra kumar Vankadari

Answer 1

require.ensure 返回一个 Promise。通过这个 Promise，你可以指示一个 chunk 是否已经加载完成：

//entry.js
console.log('loading my chunk...');
let chunkPromise = require.ensure([], () => {
  require('./my-module');
});

chunkPromise
  .then(() => console.log('chunk loaded'))
  .catch(e => console.error('chunk failed to load'));

- ed.