ES6 中的惰性模块加载是如何工作的

Question

如何延迟加载 ES6 模块？惰性，我的意思是我不想实际加载不需要的模块。例如，这是我可以用 RequireJS 做的事情：

function someEventHandler() {
    var SomeModule = require('some-module'),
        module = new SomeModule();
    // ...
}

使用 ES6 导入似乎无法实现相同的内容：

// Doesn't appear to be valid...
function someEventHandler() {
    import SomeModule from 'some-module';
    var module = new SomeModule();
    // ...
}

是否有任何可行的技术可以仅在需要时使用 ES6 模块引入依赖项？或者是跟踪完整依赖关系图并预先获取所有内容的唯一途径？

Answer 1

import 语句仅在文件的最顶部起作用，并且会加载所有文件。这主要是为了避免循环依赖的潜在问题。

也会有异步加载的方法；但是规范似乎还没有最终确定。 ES6 module loader polyfill 包使用了一个名为 System.import(moduleName) 的方法，returns 承诺和最终规范可能看起来很相似：

function someEventHandler() {
    System.import('some-module').then((SomeModule) => {
        var module = new SomeModule();
        // ...
    })
}

Answer 2

在 ES6 中延迟加载 jQuery 的示例：

import('jquery').then((jquery) => {
     // Because jquery is the module, here is the new syntax for using this 
          window.$ = jquery.default;
          window.$('#id');
});

ES6 中的惰性模块加载是如何工作的

How does lazy module loading work in ES6

javascript

import

module

lazy-loading

ecmascript-6