用動態模塊分割代碼？

我在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(); 
    }); 
}

來源

2016-09-20 Steph

這是在瀏覽器中發生的事情，對不對？如果是這樣，還沒有'需要'已經被Babel轉換了，所以不能動態改變？而你的硬編碼字符串將被成功地轉換。 – Benjamin

@ Benjamin-它是一個變量 - 它不會傳遞給硬代碼字符串。我希望它能像任何其他js變量一樣工作。 – Steph

**'ContextReplacementPlugin' **將爲您解決方案https://github.com/webpack/webpack/issues/118 – Everettss

我終於明白了！我將動態需求移動到它自己的文件中，所以下面是我從我的反應組件中調用該文件，然後調用該文件的內容。您需要安裝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); 
    }); 
};

來源

2016-09-29 21:11:48 Steph

用動態模塊分割代碼？

回答

相關問題