ModuleConcatenationPlugin

过去 webpack 打包时的一个取舍是将 bundle 中各个模块单独打包成闭包。这些打包函数使你的 JavaScript 在浏览器中处理的更慢。相比之下，一些工具像 Closure Compiler 和 RollupJS 可以提升(hoist)或者预编译所有模块到一个闭包中，提升你的代码在浏览器中的执行速度。

这个插件会在 webpack 中实现以上的预编译功能。By default this plugin is already enabled in production mode and disabled otherwise. If you need it in other modes, you can add it manually:

new webpack.optimize.ModuleConcatenationPlugin();

这种连结行为被称为“作用域提升(scope hoisting)”。

由于实现 ECMAScript 模块语法，作用域提升(scope hoisting)这个特定于此语法的功能才成为可能。webpack 可能会根据你正在使用的模块类型和其他的情况，回退到普通打包。

记住，此插件仅适用于由 webpack 直接处理的 ES6 模块。在使用转译器(transpiler)时，你需要禁用对模块的处理（例如 Babel 中的 modules 选项）。

绑定失败的优化[Optimization Bailouts]

像文章中解释的，webpack 试图达到分批的作用域提升(scope hoisting)。它会将一些模块绑定到一个作用域内，但并不是任何情况下都会这么做。如果 webpack 不能绑定模块，将会有两个选择 Prevent 和 Root，Prevent 意思是模块必须在自己的作用域内。 Root 意味着将创建一个新的模块组。以下条件决定了输出结果：

Condition

Outcome

Condition

Non ES6 Module

Outcome

Prevent

Condition

Imported By Non Import

Outcome

Root

Condition

Imported From Other Chunk

Outcome

Root

Condition

Imported By Multiple Other Module Groups

Outcome

Root

Condition

Imported With import()

Outcome

Root

Condition

Affected By ProvidePlugin Or Using module

Outcome

Prevent

Condition

HMR Accepted

Outcome

Root

Condition

Using eval()

Outcome

Prevent

Condition

In Multiple Chunks

Outcome

Prevent

Condition

export * from "cjs-module"

Outcome

Prevent

模块分组算法[Module Grouping Algorithm]

以下 JavaScript 伪代码解释了算法：

modules.forEach(module => {
  const group = new ModuleGroup({
    root: module
  });
  module.dependencies.forEach(dependency => {
    tryToAdd(group, dependency);
  });
  if (group.modules.length > 1) {
    orderedModules = topologicalSort(group.modules);
    concatenatedModule = new ConcatenatedModule(orderedModules);
    chunk.add(concatenatedModule);
    orderedModules.forEach(groupModule => {
      chunk.remove(groupModule);
    });
  }
});
function tryToAdd(group, module) {
  if (group.has(module)) {
    return true;
  }
  if (!hasPreconditions(module)) {
    return false;
  }
  const nextGroup = group;
  const result = module.dependents.reduce((check, dependent) => {
    return check && tryToAdd(nextGroup, dependent);
  }, true);
  if (!result) {
    return false;
  }
  module.dependencies.forEach(dependency => {
    tryToAdd(group, dependency);
  });
  group.merge(nextGroup);
  return true;
}

优化绑定失败的调试[Debugging Optimization Bailouts]

当我们使用 webpack CLI 时，加上参数 --display-optimization-bailout 将显示绑定失败的原因。在 webpack 配置里，只需将以下内容添加到 stats 对象中：

module.exports = {
  //...
  stats: {
    // Examine all modules
    maxModules: Infinity,
    // Display bailout reasons
    optimizationBailout: true
  }
};

进一步阅读

贡献人员

TheLarkInn byzyk skipjack