使用动态模块进行代码拆分？

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 移至其自己的文件中，因此下面是我从 React 组件对该文件的调用，然后是文件的内容。您需要安装捆绑加载程序包才能执行此操作。

因此，这就是我进行调用的地方，this与我想要加载的组件的名称一起传递。

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

动态Require.js 文件保存了使用bundle-loader 的动态require 调用：

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