Что такое плоское связывание и почему Rollup лучше, чем Webpack?

Недавно я изучал rollup и видел, как он отличается от Webpack и других связующих. Одна вещь, с которой мне приходилось сталкиваться, было то, что она лучше для библиотек из-за "плоского связывания". Это основано на чириканье и недавний PR для React для использования Rollup.

По моему опыту, Rollup лучше работает над созданием библиотек из-за лучшей оптимизации вокруг плоского связывания (например, подъема). 1/2

Webpack 2 может быть лучше для вас, если вы собираетесь подключать приложения с разделением кода и т.д. 2/2

Я не совсем уверен, что понимаю, что это значит. К чему относится плоское связывание? Я знаю, что в документации Rollup упоминается treeshaking, чтобы уменьшить размер пакета, но В Webpack также есть способ сделать это. Возможно, я просто не понимаю концепцию целиком.

Обратите внимание, что это НЕ вопрос сравнения, касающийся Rollup vs Webpack. Для людей, заинтересованных в этом, существует сравнительная таблица для Webpack. Это прежде всего вопрос, что такое плоское связывание? И потенциально, что делает Rollup внутренне для достижения этого?

Ответ 1

Изменить: Webpack теперь поддерживает захват области в некоторых ситуациях - читайте здесь сообщение в блоге

У нас, наверное, все разные определения для этого материала, но я думаю, что плоское связывание просто означает "брать ваши модули и превращать их в один пучок" - т.е. "квартира" избыточна. Большая разница в React 16 заключается в том, что по умолчанию вы будете использовать пакет по умолчанию, вместо того, чтобы ваше приложение отвечало за объединение исходных модулей React (хотя всегда существовал готовый комплект UMD из React доступен, построенный с помощью Browserify).

Скорее, большая разница между ними - это то, что происходит на границах модуля. Способ работы webpack заключается в том, что он обертывает каждый модуль в функцию и создает пакет, который реализует загрузчик и кеш модуля. Во время выполнения каждая из этих функций модуля оценивается, в свою очередь, для заполнения кеша модуля. Эта архитектура имеет множество преимуществ - она позволяет реализовать расширенные функции, такие как разделение кода и загрузка по требованию, и замена горячего модуля (HMR).

Rollup использует другой подход - он помещает весь ваш код на один уровень (при необходимости переписывая идентификаторы, чтобы избежать конфликтов между именами переменных и т.д.). Это часто называют " область подъема". Из-за этого нет накладных расходов по каждому модулю и нет накладных расходов. Ваш пакет гарантированно будет меньше, а также будет оцениваться быстрее, потому что меньше указаний (больше информации об этом - Стоимость небольших модулей). Компромисс заключается в том, что это поведение зависит от семантики модуля ES2015, а это означает, что некоторые из расширенных функций webpack намного сложнее реализовать (например, Rollup не поддерживает разделение кода, по крайней мере, пока нет!).

Короче говоря, webpack, как правило, лучше подходит для приложений, а Rollup, как правило, лучше подходит для библиотек.

Я собрал небольшой мастерить с помощью Rollup REPL.