用动态模块分割代码？

我在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

用动态模块分割代码？

回答

相关问题