ダイナミックモジュールによるコード分割ですか？

Question

私はReact内でWebpackのコード分割機能を使用しています。私は、ユーザーがオプションを選択するアプリケーションを構築しています。対応するReactコンポーネントがレンダリングされます。しかし、CommonJs require.ensureを使用すると、ハードコードされた文字列でしか動作しないことがわかりました。変数を使用すると、動作しているように見えますが、コンポーネントは切り替わります。しかし、ネットワークタブを見ると、コードを分割しないことがわかります。新しいバンドルはロードされません。私がハードコーディングすると、新しいバンドルのたびに呼び出しがあります。ここで

が働いているものである：ここでは

executeDynamic(component){ 
    var that = this; 
    switch(component){ 
     case 'SolidButton': 
      require.ensure([], function(require){ 
       DynamicModule = require(`./elements/SolidButton/index.js`); 
       that.forceUpdate(); 
      }); 
      break; 
     case 'ThreeDButton': 
      require.ensure([], function(require){ 
       DynamicModule = require(`./elements/ThreeDButton/index.js`); 
       that.forceUpdate(); 
      }); 
      break; 
     case 'NoPreview': 
      require.ensure([], function(require){ 
       DynamicModule = require(`./elements/NoPreview/index.js`); 
       that.forceUpdate(); 
      }); 
      break; 
     default: 
      break; 
    }  
} 

は私が働くことを望むものである：

executeDynamic(component){ 
    var that = this; 
    require.ensure([], function(require) { 
     DynamicModule = require(`./elements/${component}/index.js`); 
     that.forceUpdate(); 
    }); 
} 

Answer 1

私は最終的にそれを得ました！動的なrequireを独自のファイルに移動しました。以下は、私の反応コンポーネントからのファイルへの呼び出しです。次に、ファイルの内容です。これを行うには、bundle-loaderパッケージがインストールされている必要があります。

ここで私はロードするコンポーネントの名前と共にthisを渡してコールします。私たちのダイナミックを保持している

loadLiveCode(that, component) { 
    req(component, function(result) { 
     DynamicModule = result; 
     that.forceUpdate(); 
    }); 
} 

そしてdynamicRequire.jsファイルがバンドル・ローダーを利用して、コールが必要です。

module.exports = function loadAsync(expr, callback) { 
    var bundledResult = require("bundle!./elements/" + expr + "/index.js"); 
    bundledResult(function(result) { 
    callback(result); 
    }); 
};