Узнайте больше о прошлом, настоящем и будущем сборщиков, таких как Webpack, Rollup и Vite.

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

Фон бандлеров

Интернет до сборщиков

Для большей части Интернета упаковщики не существовали. Чтобы включить скрипты, большинство людей просто подключаются к библиотеке через CDN, например CDNJS или Google Hosted Libraries. Это начало меняться в 2009 году, когда был выпущен Node.js. Вместо использования CDN Node.js поставлялся с менеджером пакетов npm. npm было легко использовать, потому что каждая библиотека находилась всего в одном npm install расстоянии, а обновление не требовало усилий. Из-за простоты использования многие люди хотели использовать npm в Интернете. Однако это было невозможно, пока не появился Browserify.

Браузериф

Слоган Browserify довольно хорошо описывает сам себя.

Browserify позволяет вам require('modules') работать в браузере, объединяя все ваши зависимости.

Browserify был первым «связывателем» JavaScript. Если вы не знаете, что такое упаковщик, это инструмент, который объединяет несколько скриптов в один скрипт и часто выполняет преобразования в скриптах, которые он объединяет. Это означает, что вы можете объединять различные сценарии из NPM со своим кодом, анализируя require() операторов в своем коде. Объединение также означало, что ваш сайт часто работал быстрее, потому что отправлялось не так много HTTP-запросов, что уменьшало накладные расходы (в современных браузерах это менее актуально, поскольку HTTP/2 добавляет возможность загрузки нескольких ресурсов по одному соединению). Благодаря этим преимуществам Browserify быстро получил признание. Также важно отметить другие способы использования модулей в Интернете, такие как Require.js, в котором использовался AMD вместо CommonJS, и Bower, полностью заменивший NPM для браузера.

хрюканье и глоток

Хотя Browserify отлично справлялся со сборкой скриптов, он не так хорошо преобразовывал код. Допустим, вы хотите скомпилировать свой код CoffeeScript в JavaScript. Вы можете сделать это с помощью простого Browserify. Однако он громоздкий и относительно негибкий. Чтобы исправить это, родилась новая группа инструментов для Интернета, ориентированная на выполнение преобразований кода. Их обычно называют таск-раннерами, а самые популярные из них — Grunt и Gulp. Grunt был первым диспетчером задач, впервые выпущенным в январе 2012 года. Он позволял более гибко преобразовывать код при использовании сборщиков, таких как Browserify, или без сборщиков. Однако с Grunt остались проблемы, которые решил Gulp. Gulp работает быстрее, так как использует потоки Node вместо временных файлов и выполняет задачи параллельно, а также позволяет людям использовать сценарий вместо файла конфигурации JSON. Однако это все еще было не идеально, потому что использование двух разных инструментов раздражало. Это было исправлено Webpack

Вебпак

Webpack сочетает в себе как связывание, так и компиляцию, что делает его проще, чем предыдущий стандарт Gulp + Browserify. Webpack впервые начал набирать популярность в 2016 году и остается популярным по сей день. Есть и другие преимущества Webpack. Во-первых, он поддерживает объединение и преобразование ресурсов, отличных от JavaScript, таких как HTML, CSS и изображения. Во-вторых, API часто проще в использовании (хотя он по-прежнему сложен по сравнению с новейшими сборщиками). Многие инструменты, такие как Create-React-App, Next.js и Vuepress, используют Webpack.

Почему Bundlers/Build Tools важны

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

Оптимизация

В общем, большинство людей не пишут свой код так:

Вместо этого, чтобы сделать вещи читаемыми, они, вероятно, написали бы что-то вроде этого:

Однако первый пример меньше и поэтому переносится быстрее. Теперь вы можете подумать, что вам нужно пожертвовать размером ради удобочитаемости, но есть решение — минификаторы. Минификаторы автоматически преобразуют ваш исходный код в меньшую форму. Фактически, первый пример кода был сгенерирован Terser, одним из лучших минификаторов. Сборщики упрощают использование минификаторов с помощью плагинов. Кроме того, упаковщики помогают выполнять другие оптимизации, такие как встряхивание дерева, которое удаляет неиспользуемый код. Наконец, объединение скриптов само по себе может повысить производительность за счет уменьшения количества необходимых HTTP-запросов.

Родные языки вне Интернета

Часто эффективнее использовать язык вроде Sass или Stylus вместо простого CSS. Или, возможно, вы пытаетесь использовать TypeScript для принудительной статической типизации в вашем коде. В любом случае, часто лучше использовать языки, которые Интернет изначально не поддерживает. Бандлеры могут помочь в этом. Вместо того, чтобы самостоятельно запускать кучу разных команд для компиляции всего, вы часто можете просто добавить плагины в файл конфигурации вашего сборщика и запустить сборщик.

Особенности разработки

У большинства современных сборщиков есть функции, которые позволяют ускорить итерацию, например Hot Module Reload (HMR). HMR автоматически перезагружает определенные модули, которые изменились, а не всю страницу, что ускоряет перезагрузку. Кроме того, если вы используете такой фреймворк, как React, состояние React можно сохранить, что означает, что данные страницы не сбрасываются каждый раз.

Простое включение модулей

Объединение модулей вместе - это первоначальная причина, по которой были созданы сборщики. Несмотря на то, что сейчас есть много других функций, это все еще важно. Даже при встроенной поддержке ESM все равно полезно иметь возможность import или require модулей без необходимости писать полные пути импорта (хотя в этом могут помочь карты импорта).

Состояние инструментов сборки

Принятие

В настоящее время почти каждый веб-разработчик использует тот или иной упаковщик. Webpack на сегодняшний день является самым популярным, Rollup и Vite на втором и третьем месте соответственно. В настоящее время Vite является самым быстрорастущим крупным сборщиком, который был принят такими фреймворками, как Vitepress, SvelteKit, Astro и другими.

Модули ECMAScript (ESM)

ESM поддерживается в большинстве современных сборщиков. Хотя такие инструменты, как Browserify, не поддерживают ESM, большинство инструментов, как новых, так и более новых, чем Webpack, поддерживают ESM. Кроме того, ESM часто рекомендуется для работы с поддерживаемыми упаковщиками, поскольку он более ориентирован на будущее, чем CommonJS или AMD, и его проще статически анализировать при импорте на предмет встряхивания дерева. ESM также открывает возможности для отдельной разработки, о которой мы расскажем ниже.

Раздельная разработка

Раздельная разработка использует встроенную поддержку ESM в браузерах, чтобы обеспечить сверхбыструю разработку. В отличие от традиционного сборщика, который объединяет все, что находится в разработке, раздельная разработка преобразует код и переписывает пути импорта в пути к файлу, совместимому с ESM, без объединения вашего кода. Кроме того, большинство упаковщиков, которые делают это заранее, связывают зависимости, потому что это уменьшает количество необходимых импортов, а зависимости вряд ли будут часто меняться. Двумя наиболее известными сборщиками, использующими раздельную разработку, являются Vite и Snowpack. Snowpack, созданный в 2019 году, был первым упаковщиком, в котором был реализован раздельный опыт разработки. Однако, хотя Snowpack некоторое время был популярен, это не длилось вечно. В 2020 году команда Vue создала Vite. Vite имеет много преимуществ перед Snowpack, таких как простота использования, скорость, лучшая оптимизация и многое другое. Кроме того, популярные проекты, такие как SvelteKit, используют Vite вместо Snowpack. Все это помогло Vite обойти Snowpack по количеству загрузок, и теперь у него более чем в 10 раз больше загрузок по сравнению со Snowpack. Фактически, даже Astro, проект, созданный командой Snowpack (ищите статью об Astro), теперь использует Vite. В целом, если вы хотите быстрой и независимой разработки, я рекомендую Vite.

Более быстрые языки

Еще один способ, которым многие люди пытаются ускорить сборку и преобразование кода, — использование более оптимизированных языков, таких как Go или Rust. В настоящее время двумя наиболее известными инструментами, которые делают это, являются esbuild и SWC. esbuild был создан Эваном Уоллесом в 2016 году с использованием Go. esbuild сыграл роль Babel в преобразовании современного JavaScript, компилятора TypeScript, Terser и базовой сборки в одном пакете, который был значительно быстрее, чем любые другие инструменты того времени. SWC был создан в 2017 году kdy1 с использованием Rust. SWC даже быстрее, чем esbuild, хотя и незначительно. esbuild в настоящее время более популярен, чем SWC, и используется такими проектами, как Vite, хотя Deno и Next.js приняли SWC.

Конфигурация от низкого до нуля

Webpack имеет печально известную сложную систему плагинов. Хотя он очень мощный, он может быть страшным для новичков. К счастью, есть более новые упаковщики, которые сосредоточены на этом. Parcel был создан в 2017 году Девоном Говеттом, чтобы упростить сборку без настройки. Parcel поддерживает многие функции, предоставляемые плагинами Webpack, такие как Sass, TypeScript и JSX, не требуя от вас каких-либо действий. Кроме того, из-за кэширования и растущего использования Rust Parcel v2 может работать быстрее, чем Webpack. Vite — еще один сборщик с низкой конфигурацией, хотя он не так много делает из коробки.

Что насчет вебпака?

Webpack по-прежнему остается самым популярным упаковщиком. Несмотря на то, что он не использует возможности для значительного улучшения скорости, указанные выше, он все же добавил новые функции в самую последнюю версию Webpack 5. Самая важная вещь, добавленная в Webpack 5, — это федерация модулей или микроинтерфейсы. Объединение модулей разделяет различные элементы веб-сайта и упрощает совместное использование фрагментов кода, таких как библиотеки компонентов. Еще одна важная вещь, которую Webpack добавил в версию 5, — это улучшенное кэширование, которое может сократить время перезагрузки при разработке. В целом, Webpack все еще развивается, хотя и отстает от некоторых сборщиков по некоторым функциям.

Заключение

Мир веб-бандеров быстро развивается. Надеюсь, эта статья дала вам обзор того, что в настоящее время происходит с упаковщиками. Если вам понравилась эта статья, подпишитесь на список рассылки ByteofDev ниже (или не подписывайтесь, но я надеюсь, что вы это сделаете 🙃), и спасибо за чтение.

Первоначально опубликовано на https://byteofdev.com 23 января 2022 г.

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.