Плагин объединения модулей

В прошлом, одним из компромиссов webpack при объединении было то, что каждый модуль в вашем пакете был обернут в отдельные функции-замыкания. Эти обертывающие функции делали выполнение JavaScript в браузере медленнее. В сравнении, такие инструменты, как Closure Compiler и RollupJS, «вытягивают вверх» или объединяют область видимости всех ваших модулей в одно замыкание и позволяют вашему коду выполняться быстрее в браузере.

Этот плагин включит такое же поведение объединения в webpack. По умолчанию этот плагин уже включен в режиме производства mode и отключён в противном случае. Если вам нужно переопределить оптимизацию в режиме производства mode , установите optimization.concatenateModules параметр в значение false. Чтобы включить поведение объединения в других режимах, вы можете добавить ModuleConcatenationPlugin вручную или использовать optimization.concatenateModules параметр:

new webpack.optimize.ModuleConcatenationPlugin();

Это поведение объединения называется «вытягиванием области видимости вверх».

Вытягивание области видимости вверх — это функция, которая стала возможной благодаря синтаксису модулей ECMAScript. Из-за этого webpack может вернуться к обычному объединению в зависимости от типа используемых модулей, а также от других условий.

Помните, что этот плагин будет применён только к модулям ES6, обработанным непосредственно webpack. При использовании транспилятора, вам нужно будет отключить обработку модулей (например, параметр modules в Babel).

Выходы из оптимизации

Как объясняется в статье, webpack пытается достичь частичного вытягивания области видимости вверх. Он будет объединять модули в одну область видимости, но не во всех случаях. Если webpack не может объединить модуль, есть два варианта: «Запретить» и «Корень». «Запретить» означает, что модуль должен быть в своей собственной области видимости. «Корень» означает, что будет создана новая группа модулей. Следующие условия определяют результат:

Условие	Результат
Модуль не ES6 Запретить	Запретить
Импортируется не импортирующим элементом Корень	Корень
Импортируется из другого фрагмента Корень	Корень
Импортируется несколькими другими группами модулей Корень	Корень
Импортируется с import() Корень	Корень
Затронуто ProvidePlugin или используется module Запретить	Запретить
Принято HMR Корень	Корень
Используется eval() Запретить	Запретить
В нескольких фрагментах Запретить	Запретить
export * from "cjs-module" Запретить	Запретить

Алгоритм группировки модулей

Следующий псевдо-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;
}

Отладка выходов из оптимизации

При использовании webpack CLI, флаг --display-optimization-bailout отобразит причины выхода из оптимизации. При использовании конфигурации webpack, просто добавьте следующее в stats объект:

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