延迟模块加载在 ES6 中是如何工作的答案

【问题标题】：How does lazy module loading work in ES6延迟模块加载在 ES6 中是如何工作的
【发布时间】：2015-05-04 14:49:30
【问题描述】：

我如何延迟加载 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 模块来引入依赖项？或者是跟踪完整依赖图并预先获取所有内容的唯一途径？

【问题讨论】：

您必须使用系统加载程序 API。见Dynamic module import in Ember CLI
不，不可能使用import 语法。但是，您可以使用 require 函数的异步（！）等效项。

标签： javascript import module lazy-loading ecmascript-6

【解决方案1】：

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

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

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

【讨论】：

现在有一个从 JavaScript 动态导入的提议：github.com/tc39/proposal-dynamic-import。它在全局范围内指定了一个简单的import() 函数。 WebPack 2 支持这个版本 v2.1.0-beta.28。
在 ES6 中延迟加载 jQuery 的示例 : import('jquery').then((jquery) => { // 因为 jquery 是模块，所以这里是使用这个窗口的新语法。$ = jquery.default; window.$('#id'); });

【解决方案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');
});

【讨论】：