Parcel Vs Webpack

Parcel Webpack
Parcel Vs Webpack

ОБЪЯВЛЕНИЕ:Центр исследований и разработок Meituan Chengdu нанимает многоWeb-интерфейс, iOS, Android, Java-бэкенд, QA, техническая экспертиза, хорошая зарплата, большие перспективы развития, комфортная жизнь, если вам интересно, пишите на gwuhaolin@icloud.com

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

родился из ниоткудаParcelНедавно он стал еще одной горячей точкой во внешнем кругу, и всего за несколько недель он выиграл 13K Star. Почему Parcel, будучи новичком в области передовых строительных инструментов, получил столько одобрения за короткий период времени? Какие преимущества он имеет перед своим старшим братом Webpack?

Мне потребовалось 6 месяцев, чтобы написать исчерпывающую книгу по Webpack.«Углубленный веб-пакет»Он был опубликован совсем недавно, и я чувствую, что новый Parcel разрезал меня пополам. Тем не менее, в этой статье мы подробно сравним их с честным и беспристрастным отношением, чтобы вы могли понять их прямые сходства и различия, а также их преимущества и недостатки, чтобы вы могли решить, выбрать ли Parcel или Webpack.

Чтобы сравнить их, давайте возьмем в качестве примера практический проект и используем Parcel и Webpack для их реализации соответственно.Фактические требования к проекту следующие:

  • В проекте используется TypeScript+React+SCSS;
  • Проект принятAntdбиблиотека компонентов пользовательского интерфейса, но для загрузки только используемых компонентов по запросу не все компоненты упакованы;
  • проект используетLodashБиблиотеки для проверки наличия в сборке возможности отсеивать бесполезный код (TreeShaking);
  • Конструкция должна поддерживать функцию горячей замены модуля для повышения эффективности разработки;
  • Поддержка SourceMap для легкой отладки;
  • Сравните скорость их первого запуска со скоростью сборки при прослушивании изменений;
  • В производственной среде JS и CSS необходимо сжимать, а CSS необходимо извлекать в отдельные файлы и сравнивать с размером файла, который они создают в производственной среде;
  • Необходимо сгенерировать HTML-файл, автоматически загружающий соответствующие ресурсы;

Посылка заставляет людей сиять

Использование Parcel после долгого использования Webpack похоже на использование iPhone после долгого использования машины Android. Вам не нужно беспокоиться о деталях и настройке. Большую часть времени Parcel достаточно и удобен в использовании.

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

Вот что в Parcel заставило мое сердце трепетать:

  • Parcel может выполнить вышеуказанные требования к строительству проекта без настройки;
  • Parcel имеет встроенные схемы построения для распространенных сценариев и их зависимостей, поэтому нет необходимости устанавливать различные зависимости;
  • Parcel может использовать HTML в качестве входа для автоматического обнаружения и упаковки зависимых ресурсов;
  • Parcel поддерживает горячую замену модулей по умолчанию, что действительно «из коробки»;

С другой стороны, Webpack доставляет гораздо больше хлопот, чем Parcel:

Этот проект занял у меня меньше минуты, чтобы собрать и настроить с помощью Parcel, и 5 минут, чтобы настроить с помощью Webpack.

Посылке еще нужно время на полировку

Благодаря вышеприведенной проектной практике было обнаружено, что Parcel в настоящее время имеет следующие очевидные недостатки:

  • SourceMap не поддерживается: В режиме разработки Parcel не выводит SourceMap, и в настоящее время он может только отлаживать код с крайне низкой читабельностью;
  • Не поддерживает отбраковку недопустимого кода (TreeShaking): Много раз мы использовали только одну функцию в библиотеке, и в результате Parcel упаковывал всю библиотеку;
  • Некоторые зависимости будут вызывать ошибку Parcel: Когда ваш проект зависит от некоторых модулей в Npm, некоторые модули Npm заставят Parcel работать неправильно;

Посылка должна платить за нулевую конфигурацию

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

  • Непослушный node_module: Некоторые зависимые библиотеки могут быть случайно включены при публикации в Npm..babelrc postcss.config.js tsconfig.jsonЭти файлы конфигурации также публикуются вместе, Поскольку Parcel в настоящее время находит эти файлы конфигурации в каталоге, он будет думать, что код в проекте нуждается в обработке. Например, библиотека мини-магазина ставит.babelrcФайл был опубликован на Npm, и проект зависел от JS-кода в библиотеке, который был скомпилирован в ES5, но Parcel использовала Babel для его повторной обработки. Чиновники Npm не оговаривают, каким спецификациям должны соответствовать пакеты, опубликованные на Npm, что делает Parcel очень сложным.
  • негибкая конфигурация: Посылка с нулевой конфигурацией закрывает многие элементы конфигурации, которые нельзя изменить в некоторых необходимых сценариях конфигурации. Например:

Сценарии использования посылки ограничены

В настоящее время ПосылкаМожет использоваться только для создания веб-страниц для работы в браузере., который также является его отправной точкой и фокусом. В индустрии программного обеспечения невозможно иметь простое решение, которое можно было бы адаптировать к различным сценариям, и даже если так называемый искусственный интеллект сможет решить эту задачу, искусственный интеллект не может гарантировать 100% правильность.

С другой стороны, помимо создания веб-страниц, Webpack также может:

Сравнение скорости сборки и размера выходного файла

Для создания вышеупомянутых проектов с помощью Parcel и Webpack соответственно собранные данные выглядят следующим образом:

элемент данных Parcel Webpack
Время сборки среды сборки 8.310s 9.58s
Время запуска среды разработки 5.42s 8.06s
Прослушивание изменений времени сборки 3.17s 2.87s
Сгенерировать размер выходного JS-файла среды 544K 274K
Размер выходного CSS-файла среды сборки 23K 23K

Из приведенных выше данных видно, что:Parcel строится быстро, но выходные файлы Parcel большие

Посылка вызывает скорость сборки и вызывает IOS, чем Android аналогичные причины использования их более гладкой:

  • Parcel интегрирован и оптимизирован лучше, потому что он встроен, в то время как Webpack использует плагины и механизмы загрузчика, чтобы разрешить сторонние расширения, что снизит производительность;
  • Parcel построен параллельно, чтобы построить многопроцесс, а также процесс создания одного веб-запада по умолчанию (WebPack также поддерживает многопроцесс);

Причина, по которой Parcel выводит большой файл JS:

  • TreeShaking не поддерживается
  • Имена всех файлов появляются в построенном JS, как показано на рисунке:

надПолный исходный код проекта можно скачать

Суммировать

Текущая версия Parcel похожа на бета-версию iPhone. Она выглядит красиво, но не может быть использована для среды генерации. Если вы используете Parcel для среды генерации сейчас, я уверен, вы обязательно наступите на много ям. Неважно, если вы наступите на яму, самое страшное, что вы не сможете найти решение в Интернете, чтобы решить проблему быстро.

Я не отговариваю всех от использования Parcel.Истории всегда нужны первопроходцы для ее продвижения.Так же как Стив Джобс руководил эпохой без колебаний, так и нам нужно практиковать Parcel.Ямы заполняются одна за другой,поэтому призываю всех работать над некоторые небольшие личные проекты.Используйте Parcel в .

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

читать оригинал

Категории