web-dev-qa-db-ja.com

ES6でレイジーモジュールのロードはどのように機能しますか

ES6モジュールをlazily-loadするにはどうすればよいですか？ lazyとは、不要のモジュールを実際にロードしたくないという意味です。たとえば、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モジュールを使用して、必要な場合にのみ依存関係を取り込むための実行可能な手法はありますか？または、完全な依存関係グラフをトレースし、すべてを事前に取得する唯一のパスですか？

javascriptimportmodulelazy-loadingecmascript-6
16
Adam Boduch

importステートメントはファイルの最上部でのみ機能し、すべてのファイルをロードします。これは主に、循環依存の潜在的な問題を回避するためです。

非同期ロードを行う方法もあります。ただし、仕様はまだ確定していないようです。 ES6モジュールローダー polyfillパッケージは、promiseを返すSystem.import(moduleName)というメソッドを使用し、最終的な仕様は次のようになります。

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

ES6でjQueryを遅延読み込みする例：

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