16

最終編集

これの tl;dr 解決策は、それは不可能だということです。以下の一番の答えには良い情報がありますが。

からの以下のコードを検討してくださいcontacts.js。これは動的に読み込まれるモジュールでSystem.importあり、コード内の他の場所でオンデマンドで読み込まれます。

で動的にロードSharedUtil1される他のモジュールでも が使用されている場合、これらすべてのモジュールから除外し、最初に必要になったときにオンデマンドでのみロードするにSystem.importはどうすればよいですか?SharedUtility1

私のエクスポートはそれに依存しているため、トップレベルSystem.importのSharedUtil1は機能しません。エクスポートは、モジュールのコードのトップレベルにのみ配置でき、どのような種類のコールバックにも配置できません。

これはWebpackで可能ですか？バージョン 2.0.7 ベータ版を使用しています。

import SharedUtil1 from '../../SharedUtilities/SharedUtility1';

class Contacts{
    constructor(data){
        this.data = data;
        this.sharedUtil1 = new SharedUtil1();
    }
}

export default Contacts;

更新 1

バンドルローダーは私が望んでいたものだと思いましたが、そうではありません。それは、インポートされたモジュールを別の関数に変換し、コールバックを使用して呼び出して実際のモジュールに到達し、非同期でロードした後です。これは、コードに重大な変更を加えずにモジュール X を透過的に非同期にロードすることはできないことを意味します。最初に説明した問題に戻っているという事実は言うまでもありません。依存関係が読み込まれている場合、エクスポートは最上位にある必要があるため、エクスポートする方法はありません。

依存関係 X が必要に応じてオンデマンドでロードされ、それをインポートするインポートされたモジュールがインポートプロセスを透過的に待機することを Webpack に示す方法はありませんか? このユースケースは、リモートで大規模なアプリケーションの場合は必須条件になると思うので、何かが足りないと考える必要があります。

更新 2

require.ensurePeter の回答によると、commonChunk プラグインはエンドポイント間でコードを共有することに関連しているため、重複排除を機能させようとしexportました。

重複排除に関する限り、contacts.js両方tasks.jsとも同じように sharedUtil をロードします

import SharedUtil1 from '../../sharedUtilities/sharedUtility1';

webpackを次のように実行してみました

webpack --optimize-dedupe

また、追加することによって

plugins: [
    new webpack.optimize.DedupePlugin()
]

webpack.config に。どちらの場合でも、sharedUtil コードは連絡先バンドルとタスク バンドルの両方に配置されています。

4

4 に答える 4