javascript - Require.ensure() 非阻塞

Question

如果我们有不同的由 webpack 创建的包并且我们 require.ensure在稍后的时间点动态传输+评估它的东西，它通过 jsonPadding 和一些 webpack js 魔法发生。如果我们有

require.ensure([ ], ( require ) => {
    console.log('before...');
    var data = require( './myModule.js' );
    console.log('after...');
  }, 'myModule')

"after..."将在该模块完全转移和评估时遇到。如果碰巧这个 block /模块非常大，包含图像、css 和诸如此类的东西，那么加载几乎会锁定浏览器，而 webpack javascript 代码会解压捆绑包及其所有组件。

问题 : 有什么方法可以“钩”到 require魔法？例如，有回调将是一个梦想的场景:

整个文件/ block 已传输

图像[1] 已评估

css[1] 被评估/样式标签被注入(inject)

javascript 已评估

以此类推，假设我们传输的包包含大量数据。一般来说，我很难有一个不错的选择来动态地异步传输整个包，但仍然必须以完全同步/阻塞的方式加载那个包。

Answer 1

Let me preface by saying I know this might be an 'annoying' answer, because it doesn't answer your question directly but offers an alternative, pragmatic, solution to the browser hanging problem. I used this pattern myself to manage asset loading within the context of a heavy 3D web game.

I'm writing this as an answer and not as a comment so it might serve others who come across the same problem. If this does answer your case, I'll be happy to provide actual code to implement and generify these sort of modules.

如果我理解正确，基本上你想要的是一种分解 MyModule 的方法成离散组件，可以在一个 require.ensure 的上下文中自动加载和评估，但要处理评估，以便并非一次性评估所有内容，从而导致浏览器挂起。

另一种看待这个问题的方法是使用 require和 ensure方法本身作为加载/评估机制。考虑 MyModule.js ，这是一个巨大的加载模块，依赖 Css1, Css2, ... CssN以及 JS1, JS2, ... JSN和图像。

我的建议是将其分解为 SuperMyModule.js这需要 MyModuleLogic.js以及所有的 CSS、图像和 JS。

节点，位于 SuperMyModule.js你可以这样做:

let myModuleLogic = require("myModuleLogic");
console.log('JS was evaluated');

require.ensure(['image1.png'], ( require ) => {
    let data = require( './images1.png' );
    console.log('image[1] was evaluated');
    // register that resource was evaluated/fire event
})
require.ensure(['style1.css'], ( require ) => {
    let data = require( './style1.css' );
    console.log('css[1] was evaluated');
    // register that resource was evaluated/fire event
})

//after all resources evaluated/fire callback or event

然后在您的原始文件中，就像您要求的那样:

require.ensure([ ], ( require ) => {
    console.log('before...');
    let myModule = require( './superMyModule.js' );
    console.log('after...');
  })

如果您将模块实例设置为事件发射器，则可能会像这样 Hook 到资源的加载:

require.ensure([ ], ( require ) => {
    let myModule = require( './superMyModule.js' );
    myModule.on("loadResource", myCallback)
  })