Сравнение сборщиков: Webpack, Rollup и Parcel

Объединение модулей в Javascript:

Объединение модулей на высоком уровне - это процесс объединения группы модулей в один файл, чтобы несколько модулей можно было отправить в браузер в одном пакете.

Когда мы пишем наш код по модульному принципу:

Мы храним наш javascript в отдельных файлах и папках в зависимости от функциональности.
Добавьте тег скрипта для каждого файла, который мы используем, в правильном порядке зависимости.

Для каждого тега скрипта браузер отправит запрос на сервер, что плохо скажется на производительности нашего приложения. Чтобы преодолеть это, мы обычно создаем один связанный файл, который объединяет все другие файлы, и этот связанный файл отправляется в браузер.

Объединение модулей также может включать в себя этап минификации, то есть все ненужные символы, такие как пробел, запятая, комментарии и т. Д., Удаляются из файла, и создается его минифицированная версия, и всякий раз, когда от браузера поступает запрос, минифицированная версия отправляется обратно. Меньше данных означает меньшее время обработки браузером.

Помимо создания пакета и минимизации кода, сборщик модулей также предоставляет функции для хорошего взаимодействия с разработчиком, такие как горячая перезагрузка, разделение кода и т. Д.

Сегодня на рынке представлено множество комплектов модулей, таких как webpack, browserify, rollup, parcel и т. Д. Здесь мы сосредоточимся на сравнении между webpack, rollup и parcel.

Веб-пакет, сводный пакет или посылка:

Все эти сборщики придумали разные подходы к решению проблемы, которую не могли решить существующие инструменты.

Webpack был разработан для решения проблем управления активами (то есть он может включать файлы любого типа, даже файлы, не являющиеся файлами javascript) и разделения кода. Он очень гибкий и имеет огромное количество плагинов для всех возможных вариантов использования.

Rollup, с другой стороны, придумал идею использовать стандартизированный формат (например, формат модуля ES2015) для написания кода и пытается получить действительно небольшие сборки с помощью устранения мертвого кода.

Parcel пытается предоставить вам «молниеносно быстрое» связывание, поскольку он использует несколько рабочих процессов, чтобы гарантировать, что процесс компиляции выполняется параллельно на нескольких ядрах без необходимости какой-либо конфигурации.

Я буду проводить дальнейшие сравнения между этими тремя по следующим пунктам:

1. Конфигурация:

И для Webpack, и для накопительного пакета требуется файл конфигурации для приложений. Конфигурационный файл содержит параметры, связанные с вводом, выводом, плагином, преобразованиями и т. Д. Между накопительным пакетом и конфигурационным файлом веб-пакета есть небольшая разница.

В Rollup есть полифилы узлов для импорта / экспорта, а в webpack их нет.
Rollup поддерживает относительные пути, тогда как webpack - нет, поэтому мы либо используем path.resolve, либо path.join.

Parcel, с другой стороны, не требует указания какого-либо файла конфигурации. Он все сделает из коробки.

2. Точки входа:

Webpack поддерживает только файл javascript в качестве точки входа в файл конфигурации. Для поддержки других форматов, таких как html, нам необходимо добавить сторонние плагины.

Rollup может использовать html-файл в качестве точки входа, но для этого нам нужно установить плагин (например, rollup-plugin-html-entry).

Parcel может принимать файл index.html в качестве входного файла и определять, какие пакеты javascript создавать и загружать, просматривая тег скрипта в файле index.html.

3. Преобразования:

Для создания пакета сборщикам модулей требуются файлы javascript. Они не могут напрямую обрабатывать любой другой формат. Итак, чтобы обрабатывать файлы, отличные от javascript, нам нужно сначала преобразовать этот формат в javascript, а затем мы передадим его сборщику. Этот процесс преобразования называется преобразованием.

Webpack использует загрузчики разных форматов для преобразования. например: style-loader, css-loader для файлов css. Нам нужно настроить тип файла и соответствующий загрузчик, который будет использоваться в его конфигурационном файле.

Rollup использует плагины для преобразования. Нам нужно указать плагин в конфигурационном файле накопительного пакета.

Parcel поддерживает различные преобразования, такие как css, scss, изображения и т. Д. Без файла конфигурации. Parcel автоматически запускает эти преобразования, когда находит файл конфигурации (например, .babelrc, .postcssrc) в модуле.

4. Встряхивание дерева:

Встряхивание дерева в контексте javascript относится к устранению мертвого кода.

Чтобы реализовать встряхивание дерева в webpack, нам необходимо:

Используйте синтаксис модуля ES2015 (например, import и export).
Добавьте запись «sideEffects» в package.json файл вашего проекта.
Включите минификатор, поддерживающий удаление мертвого кода (например, UglifyJSPlugin).

Rollup статически анализирует код, который вы импортируете, и исключает все, что на самом деле не используется. Это позволяет вам строить поверх существующих инструментов и модулей без добавления дополнительных зависимостей или увеличения размера вашего проекта.

Parcel пока не поддерживает встряхивание деревьев.

5. Сервер разработки:

Сервер разработки - это тип сервера, который предназначен для облегчения разработки и тестирования программ, веб-сайтов, программного обеспечения или приложений для программистов. Он предоставляет среду выполнения, а также все аппаратные / программные утилиты, которые необходимы для отладки и разработки программ.

Webpack предоставляет плагин под названием webpack-dev-server, который предоставляет простой сервер разработки с функцией перезагрузки в реальном времени. Нам нужно добавить этот плагин в наш проект и добавить некоторую конфигурацию, определяющую файл, который будет обслуживаться при его запуске, и скрипт для запуска webpack-dev-server в package.json.

Чтобы реализовать сервер разработки в свертке, нам нужно установить rollup-plugin-serve, который будет просто перестраивать скрипт всякий раз, когда мы вносим какие-либо изменения, но для обеспечения функциональности перезагрузки в реальном времени нам нужно установить другой плагин rollup-plugin-livereload. Оба плагина необходимо настроить.

Parcel имеет встроенный сервер разработки, который автоматически перестраивает ваше приложение при изменении файлов.

6. Замена горячего модуля:

Горячая замена модулей (HMR) заменяет, добавляет или удаляет модули во время работы приложения без полной перезагрузки. Это может значительно ускорить разработку.

Горячая замена модуля - одна из самых полезных функций, предлагаемых webpack. Он позволяет обновлять все типы модулей во время выполнения без необходимости полного обновления. webpack-dev-server поддерживает hot режим, в котором он пытается обновить с помощью HMR, прежде чем пытаться перезагрузить всю страницу.

Накопительный пакет не выполняет горячую замену модулей (HMR).

Parcel имеет встроенную поддержку горячей замены модулей.

7. Разделение кода:

Загрузка кода приложения может занять много времени, особенно на мобильных устройствах. Разделение кода разбивает ваше приложение на более мелкие части, так что пользователю нужно только загрузить достаточно JavaScript для начала работы, а приложение может незаметно получить остальную часть, когда это станет актуальным.

Разделение кода - самая интересная функция webpack. В webpack есть три общих подхода к разделению кода:

Точки входа: разделение кода вручную с использованием конфигурации entry.
Предотвращение дублирования: используйте CommonsChunkPlugin для дедупликации и разделения фрагментов.
Динамический импорт: разделение кода с помощью встроенных вызовов функций в модулях.

В Rollup недавно была добавлена экспериментальная функция разделения кода. Разделенные блоки, созданные с помощью объединения, являются сами просто стандартными модулями ES, которые используют встроенный в браузер загрузчик модулей без каких-либо дополнительных затрат. Нам нужно установить флаги experimentalCodeSplitting и experimentalDynamicImport в значение true в файле конфигурации.

Parcel поддерживает нулевое разделение кода конфигурации. Здесь разбиение кода контролируется использованием динамической функции import() синтаксическое предложение, которая работает как обычный оператор import или функция require, но возвращает обещание. Это означает, что модуль загружается асинхронно.

Чтобы продемонстрировать это, я создал небольшой проект, используя каждый из вышеуказанных сборщиков пакетов. Я добавил в проект базовую конфигурацию.