Рубрики
Без рубрики

Различия между посылкой и веб -пакетом

Этот пост изначально был написан здесь в моем блоге -> https: //easyontheweb.com/differences-betw … Tagged с Webpack, Node, JavaScript.

Этот пост изначально был написан здесь в моем блоге -> https://easyontheweb.com/differences-between-parcel-and-webpack/

Несколько дней назад я написал статью о создании вашей первой упаковки NPM, и во время этой статьи я понял, что вместо того, чтобы использовать Webpack в качестве моего пучка (это было просто для того, чтобы включить Babel и использовать импорт там) для этого небольшого проекта, я использовал пакет. В соответствии с лицом я использовал посылку довольно много в последнее время, что побудило меня написать эту статью, где я сравниваю их обоих и буду записать различия между Parcel и Webpack 4.

Сравнивая их в конце, я также упомяну, какой один я предпочитаю, но давайте сначала перейдем к тому, что на самом деле являются бундлерами, и каковы различия между двумя упомянутыми, которые я упомянул, то есть посыл и веб -пакет.

Что такое бундлер? Если вы являетесь разработчиком или студентом фронта, вы могли бы или не слышали о термине Bundler Но я на 95% уверен, что вы, должно быть, использовали его, даже если не сознательно. Таким образом, Bundler модуля JavaScript на самом деле представляет собой инструмент, который разыгрывает кусочки кода JavaScript и их зависимости и создает из них один файл для браузера (ну, в основном для браузера).

Есть много причин, по которым вы хотели бы объединить весь свой код JavaScript, но я приведу простейшие примеры. Предположим, вы пишете 10 файлов кода Javascript и используете в них синтаксис ES6. Теперь вы знаете, что не сможете использовать функциональные возможности ES6, такие как импорт и все без использования Babel вдоль (Babel – это инструмент, который преобразует ваш код ES6 в ES5, который понимают браузеры). Итак, вы включаете Вавилон в свой проект.

Если вы хотите, вы можете использовать все эти 10 файлов в вашем HTML -коде, а также Babel, но это не лучше всего. Вы не хотите самостоятельно управлять этим. Более того, вы, скорее всего, не будете делать это оптимизированным образом. Вот где появляется бундлер. Если вы используете Bundler, он будет объединить весь ваш код JS, а также зависимости, такие как Babel, и создаст один файл JavaScript, который вы можете затем подавать в браузер в вашем HTML -коде.

Обработка зависимостей – это то, что нам не нравятся как разработчики (если вы не психо, тогда поздравляем), и именно поэтому мы делегируем эту ответственность перед бундлерами.

Теперь, когда вы знаете основное использование бундлеров, я просто буду разыгрывать их основные преимущества один раз:-

Управляйте файлами JS и их зависимостью друг от друга. Помощь в разделении кода. (Подробнее об этом позже) Даже обрабатывайте CSS, изображения и т. Д. В наши дни. На самом деле улучшить производительность, используя только то, что требуется, и мини -минимум кода. Различия между Parcel и Webpack теперь, когда вы знаете, что такое бочонки JavaScript, давайте посмотрим, как эти два известных бундлера отличаются друг от друга в различных аспектах.

  1. Конфигурации Самая основа этих дебатов основана на том факте, что Parcel, в отличие от зрелого конкурента используй это. Он поставляется с предварительно сконфигурированной поддержкой коробки для всех основных вещей, таких как CSS, SCS, изображения и т. Д. Он также поддерживает код, разделяющий ящик.

Webpack, с другой стороны, требует, чтобы файл webpack.config.js сначала был создан, а правила должны быть записаны в этот файл, загрузчики импортируются в этот файл, а затем вы можете использовать Webpack в качестве проекта Bundler для вас.

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

Победитель: посылка

  1. Скорость, будучи фронтальной разработкой, означает, что вы постоянно строит свой файл пакета, а также продолжаете вносить изменения в свой код. Хорошая новость заключается в том, что и WebPack 4, и Parcel имеют функциональность Reloadrathy Hot Module и следят за вашими изменениями.

Что отличает их, так это то, как они реализуют вещи. Теперь, чтобы посмотреть на это – WebPack строит ваш пакет значительно быстрее по сравнению с посылкой (иногда 5x), когда речь идет о первой сборке, но есть улов – посылка, с другой начальное наращивание.

Это почему? Потому что посылка на первом наращивании реализует какое -то кэширование, которое поможет ему быть быстрее в последующих часах.

Победитель: галстук

  1. Настройка Это та область, где я даже не думаю, что есть конкуренция. WebPack – это гораздо более зрелый инструмент и следует за конфигурацией по принципам соглашения. Теперь, даже если это затрудняет начало с WebPack – когда вы работаете над большим проектом – требования приходят слева и справа, и на данный момент я не очень уверен, на самом деле сообщество JS не очень Конечно, если посылка сможет справиться с некоторыми ситуациями с подходом без конфигурации.

Webpack, как упоминалось ранее, работает на основе файла webpack.config.js, который вы можете настраивать каким-либо образом, напишите свой собственный набор правил и работайте с множеством загрузчиков с открытым исходным кодом, специально написанными для работы с вашим Bundler Webpack.

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

Посылка, будучи новым ребенком в блоке, есть здесь преимущество, потому что то, что они сделали, было внедрением дерева, что является просто причудливым словом для выражения нежелательного мертвого кода в нашем приложении (что в конечном итоге уменьшает размер пакета) для обоих ES6. Ну, как более старые модули CommonJS. WebPack делает деревья, дрожа только для модулей ES6.

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

Победитель: посылка

  1. Код, разделяющий одну из самых важных вещей, о которых позаботятся бундлеры, – это разделение кода. По мере того, как вы начинаете расти в размерах, так же, как и ваш файл единого пакета, поэтому в пакетах это реализует какие -то механизмы для загрузки определенного кода параллельно или даже ленивых частей кода, чтобы ваше приложение загружалось быстрее.

Есть много способов, которыми WebPack реализует разделение кода, но они требуют настройки WebPack. С другой стороны, посылка утверждает, что поддерживает разделение кода с нулевым конфигурацией меньшими способами, чем WebPack, но все же эффективные способы, такие как динамический импорт и все.

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

Победитель: WebPack

Последние слова .. В отличие от многих других статей в блоге, которые я прочитал во время исследования этой статьи, я решил не включать каких -либо фрагментов кода, вращающиеся вокруг webpack.config.js, так как я думаю, что они очень подавляющие. Вы можете просто читать в них, почувствовать, что они слишком сложны и не дают Webpack шанс просто из -за этого, даже если ваш любимый Next.js или Vue может использовать WebPack под самим капюшоном.

Лично я бы сказал это – начните с посылки. Это не требует настройки, и вам не придется какое -либо время, чтобы получить такие вещи, как SCSS и Babel, и все это работало на ваш проект. Я считаю, что со временем сообщество вокруг посылки только увеличится, и оно будет давать хорошую конкуренцию Webpack.

При этом, если ваше приложение действительно достигает точки, когда Parcel больше не выполняет работу, и вам нужна сила, которая поставляется с WebPack, это не очень большой переключатель – вы можете сделать это в любое время. Поэтому начните свои новые приложения с посылки и используйте его, пока вам не придется использовать WebPack (возможно, вам не придется никогда не придется).

Оригинал: “https://dev.to/sahilthakur7/differences-b-w-parcel-and-webpack-1ff6”