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

【问题标题】：Code splitting with dynamic modules?使用动态模块进行代码拆分？
【发布时间】：2017-01-28 20:49:52
【问题描述】：

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

【问题讨论】：

这是在浏览器中发生的，对吧？如果是这样，require 不是已经被 Babel 转译，因此无法动态更改吗？而您的硬编码字符串将已成功转译。
@Benjamin- 它是一个变量- 它不会转换为硬编码字符串。我希望它可以像任何其他 js 变量一样工作。
ContextReplacementPlugin 将为您提供解决方案github.com/webpack/webpack/issues/118
这是一篇关于代码拆分的博客 - medium.com/prod-io/…

标签： reactjs webpack commonjs code-splitting

【解决方案1】：

我终于明白了！！我将动态要求移到了它自己的文件中，所以下面是我从我的反应组件对该文件的调用，然后是文件的内容。您需要安装 bundle-loader 软件包才能执行此操作。

这就是我进行调用的地方，传入this 以及我要加载的组件的名称。

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

还有包含我们使用 bundle-loader 的动态 require 调用的 dynamicRequire.js 文件：

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

【讨论】：