Dinamik modüller ile kod bölme?

Question

Web paketinin React içinde kod ayırma özelliğini kullanıyorum. Kullanıcının bir seçeneği seçeceği ve karşılık gelen React bileşeninin oluşturulacağı bir uygulama yapıyorum. Ancak, CommonJs require.ensure'u kullanmanın yalnızca kodlanmış dizelerle çalıştığını buluyorum. Değişkenler kullandığım zaman işe yarayacak gibi görünüyor, bileşenler değişiyor. Ancak ağ sekmesine baktığımda, kodu bölmediğini görüyorum - yeni paketler yüklemiyor. Nerede kod yazdığımda, her defasında yeni bir paket için bir çağrı var.

İşte çalışıyor budur:

İşte

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; 
    }  
} 

çalışırdım istediğim şey:

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

Answer 1

nihayet aldım !! Dinamik gereksinimi kendi dosyasına taşıdım, aşağıda bu dosyaya benim tepki bileşenimden ve daha sonra dosyanın içeriğinden çağrı yapıyorum. Bunu yapmak için bundle-loader paketinin yüklü olması gerekir.

Bu yüzden, yüklemek istediğim bileşenin adıyla birlikte this numaralı iletiyi geçerek aramayı yapıyorum.

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

Ve bizim dinamik paket yükleyici kullanan çağrıyı gerektiren tutan dynamicRequire.js dosyası: sağ, bu tarayıcıda oluyor

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