Это пост №62 из серии, посвященный изучению JavaScript и его строительных компонентов. В процессе определения и описания основных элементов мы также поделимся некоторыми практическими правилами, которые мы используем при создании SessionStack, инструмента JavaScript для разработчиков, позволяющего идентифицировать, визуализировать и воспроизводить ошибки веб-приложений посредством воспроизведения сеанса с точностью до пикселя.
Введение
Esbuild — невероятно быстрый сборщик JavaScript, созданный с помощью Golang. Esbuild — это сборщик JavaScript следующего поколения, предназначенный для повышения производительности инструментов сборки и простоты использования. И некоторые из его основных особенностей:
- Экстремальная скорость без кэша
- Модули ES6 и CommonJS
- Встряхивание дерева модулей ES6
- API для JavaScript и Go
- Синтаксис TypeScript и JSX
- Исходные карты
- Минификация
- Плагины
Хотя esbuild не имеет такого мощного набора функций, как Webpack, он хорошо справляется со своей задачей — он прост в использовании и молниеносно быстр. На изображении ниже показано сравнение производительности esbuild и других ведущих сборщиков JavaScript:
Согласно официальному сайту esbuild, на приведенном выше изображении показано время, необходимое для создания производственного пакета из 10 копий библиотеки three.js с нуля с использованием настроек по умолчанию, включая минимизацию и исходные карты. Подробнее здесь.
На изображении выше видно, что esbuild выполнил эту задачу за 0,33 секунды, а Webpack 5 — за 41,53 секунды.
Хотя esbuild превосходит другие сборщики JavaScript, важно упомянуть об одном недостатке. И это потому, что производительность — это компромисс, поэтому, хотя esbuid работает молниеносно, он не так многофункционален, как Webpack.
Кроме того, esbuild не достиг версии 1.0, и, хотя популярность esbuild растет, он по-прежнему менее популярен, чем другие известные сборщики, такие как Webpack и Rollup, как видно из тенденции npm ниже:
Однако минимальный набор функций esbuild означает, что он не такой сложный, как Webpack. esbuild прост в освоении и использовании, и он невероятно быстр.
В дополнение к предостережениям выше, esbuild предоставляет API для JavaScript, CLI и Golang.
И в этой статье мы узнаем о esbuild и о том, как связать с ним приложения JavaScript.
Начнем со следующего раздела.
Начало работы
Прежде чем углубляться в код, мы изучим некоторые концепции esbuild, такие как типы содержимого esbuild и API сборки.
Типы контента
Esbuild обеспечивает встроенную поддержку различных типов контента с помощью загрузчиков. Эти загрузчики по функциональности аналогичны загрузчикам Webpack — они сообщают esbuild, как анализировать каждый тип контента. Некоторые из этих загрузчиков: загрузчик TypeScript, загрузчик JavaScript и загрузчик CSS настроены по умолчанию. А это означает, что esbuild обеспечивает готовую поддержку этих типов контента.
Ниже приведен список типов контента, поддерживаемых esbuild:
- Javascript: загрузчик JavaScript включен по умолчанию для файлов
.js
,.cjs
и.mjs
. - TypeScript: загрузчик TypeScript включен по умолчанию для файлов
.ts
,.tsx
,.mts
и.cts
. И это позволяет esbuild обеспечивать встроенную поддержку разбора синтаксиса TypeScript и отбрасывания аннотаций типов. Однако esbuild не выполняет проверку типов. - JSX: загрузчик JSX включен по умолчанию для файлов
.jsx
и.tsx
. Однако по умолчанию синтаксисJSX
не включен в файлах.js
. Но мы можем настроить это с помощью API сборки, как показано ниже:
https://gist.github.com/lawrenceagles/2d53816f6c58b6c34d6e17d0eb0a897e
Мы узнаем больше об API сборки esbuild в следующем разделе.
- JSON: этот загрузчик анализирует файлы JSON в объекты JavaScript и экспортирует этот объект по умолчанию. Он также включен по умолчанию для
.json
файлов. - CSS: в esbuild CSS является первоклассным типом контента, и это означает, что esbuild может связывать файлы CSS напрямую, без необходимости импортировать ваш CSS из кода JavaScript. Как показано ниже:
https://gist.github.com/lawrenceagles/2a394cf3da5780a2f558df37a24ca889
Таким образом, этот загрузчик включен по умолчанию для .css
файлов и загружает эти файлы как синтаксис CSS.
- Текст: эта выноска включена по умолчанию для
.txt
файлов. Загрузчик текста загружает файл в виде строки во время сборки и экспортирует строку как экспорт по умолчанию. И он предоставляет простой API, как показано ниже
https://gist.github.com/lawrenceagles/bd9b8189dbb08e3d65476fb4e0410a8e - Двоичный: этот загрузчик загружает файл как двоичный буфер во время сборки и встраивает его в пакет, используя кодировку Base64. Однако этот загрузчик не включен по умолчанию.
- Base64: этот загрузчик загружает файл как двоичный буфер во время сборки и встраивает его в пакет в виде строки с использованием кодировки Base64. Этот загрузчик также не включен по умолчанию.
- URL-адрес данных: этот загрузчик загружает файл в виде двоичного буфера во время сборки и встраивает его в пакет в виде URL-адреса данных в кодировке Base64. Загрузчик данных URL полезен для объединения изображений, и его можно использовать в тандеме с загрузчиком CSS для загрузки изображений с помощью
url()
. - Этот загрузчик не включен по умолчанию. И чтобы использовать его, нам нужно настроить его для соответствующего расширения файла, как показано ниже:
https://gist.github.com/lawrenceagles/71dbee9cd7393515f8db283db005c75a - Внешний файл: этот загрузчик копирует файлы в выходной каталог и встраивает имя файла в пакет в виде строки. И эта строка экспортируется с использованием экспорта по умолчанию. Подобно загрузчику данных URL, этот загрузчик может использоваться для загрузки изображений и может работать вместе с загрузчиком CSS.
- Чтобы использовать этот загрузчик, нам нужно вручную настроить его для соответствующего расширения, как показано ниже:
https://gist.github.com/lawrenceagles/6c1121af845829b4f8875af454a244eb
И это выглядит так:< br /> https://gist.github.com/lawrenceagles/b568cc5c02930a16d7bd39528782907a
API сборки
Хотя мы можем использовать esbuild через терминал с помощью CLI API, если передать много параметров в CLI, это может стать громоздким. Таким образом, для более сложных случаев использования esbuild также предоставляет API JavaScript, который является API сборки. И это позволяет нам настроить поведение esbuild. Это синоним файла webpack.config.js
для Webpack.
API сборки для esbuild выглядит примерно так:
https://gist.github.com/lawrenceagles/8be4b1bd951e0b433daf804d3d825d2a
Функция сборки запускает исполняемый файл esbuild в дочернем процессе и возвращает обещание, которое разрешается после завершения сборки.
Хотя esbuild предоставляет альтернативный API сборки: buildSync
— который работает синхронно, лучше всего использовать API асинхронной сборки, поскольку плагины esbuild работают только с асинхронным API.
В сложных случаях, когда мы хотим поддерживать старые браузеры, нам нужно преобразовать современный синтаксис JavaScript в более старый синтаксис JavaScript.
Мы можем настроить целевую среду, как показано ниже:
https://gist.github.com/lawrenceagles/aeca2ca9bcf7869ab92dbd872b9f0c4a
Обратите внимание, что в приведенном выше примере используется API buildSync
.
API сборки esbuild предоставляет множество простых и расширенных опций для настройки поведения esbuild.
И в приведенном выше коде мы использовали некоторые из этих параметров:
- Точки входа: этот параметр представляет собой массив файлов. И каждый файл служит входом для алгоритма объединения. Они называются
entry points
, потому что сначала оцениваются, а затем загружают весь остальной код в приложение.
Таким образом, вместо того, чтобы загружать множество библиотек на вашу страницу с тегами<script>
, мы можем использовать операторыimport
, чтобы добавить их в запись нашего приложения. точка. - Outfile: этот параметр применим только в том случае, если есть только одна точка входа, как показано в нашем примере выше. Параметр
outfile
указывает имя конечного пакета — выходного файла, созданного в процессе сборки. - При наличии нескольких точек входа мы должны использовать параметр
outdir
для указания выходного каталога. - Outdir: этот параметр указывает выходной каталог для процесса сборки. И этот каталог будет создан только в том случае, если он еще не существует. Например, приведенный ниже код создаст выходной каталог с именем output для операции сборки:
https://gist.github.com/lawrenceagles/fea875722e3b92874c71516bc78be45d - Bundle: esbuild по умолчанию не объединяет, поэтому, чтобы связать наш файл, нам нужно явно указать его, как показано выше, установив для его параметра значение
true
. - Минимизировать: если установлено значение
true
, этот параметр включает минимизацию нашего кода в процессе сборки. Минимизированный код меньше красиво напечатанного кода, и его легче загрузить. Но минимизированный код труднее отлаживать, поэтому обычно мы минимизируем код при сборке для производства. - Исходная карта: исходная карта — это файл, который обеспечивает способ сопоставления минимизированного и урезанного пакета JavaScript в его несвязанном состоянии. Во время создания ресурсов приложения — файлы CSS и JavaScript минимизируются и объединяются в один пакет, чтобы сделать их доставку с сервера более эффективной. Однако эти минимизированные и упрощенные пакеты трудно читать и отлаживать. Sourcemaps — это файл, который сопоставляет объединенный исходный код с исходным — несвязанным исходным кодом, что позволяет браузеру восстановить несвязанный исходный код и доставить его в отладчик. Установив для этой опции значение
true
, мы указываем esbuild генерировать исходные карты. - Цель: указывает целевую среду — например, браузер, для связанного кода JavaScript и/или CSS. Поэтому, если синтаксис JavaScript слишком нов для указанной среды, он сообщает esbuild преобразовать его в более старый синтаксис JavaScript, который может работать в этих средах.
Помимо этого, есть еще параметры, такие как watch
, serve
, и другие расширенные параметры, такие как tree shaking
, JSX fragments
, JSX factory
и т. д.
В комплекте с esbuild
В этом разделе мы узнаем, как объединять приложения с помощью esbuild.
Чтобы использовать esbuild, сначала создайте проект nodejs, запустив:
npm init -y
Из каталога вашего проекта. Затем установите пакет esbuild, запустив:
npm install esbuild
Вы можете проверить версию, выполнив:
/node_modules/.bin/esbuild — version
И это печатает: 0.14.38
Мы собираем приложение React, поэтому установите следующие пакеты React:
npm install react react-dom
Теперь создайте файл app.jsx
, содержащий следующий код:
https://gist.github.com/lawrenceagles/4829768fab37f3839874610d6504c97a
Теперь мы можем указать esbuild собрать наше приложение с помощью CLI API, запустив:
./node_modules/.bin/esbuild app.jsx — bundle — outfile=bundle.js
И мы получаем:
Итак, запустив приведенную выше команду, esbuild объединяет наше приложение в файл bundle.js
. Кроме того, esbuild преобразует синтаксис JSX
в JavaScript без каких-либо настроек, кроме расширения .jsx
.
В нашем примере выше есть две вещи, на которые стоит обратить внимание:
- Процесс сборки esbuild не объединяет наше приложение по умолчанию, поэтому нам явно нужно передать флаг
— bundle
в команде. А если флаг— bundle
отсутствует, esbuild будет запускать API преобразования вместо API сборки.
API преобразования esbuild идеально подходит для таких сред, как браузер, в которых нет файла. system, потому что он выполняет операции с одной строкой без доступа к файловой системе. А в случае выше, выполнив:./node_modules/.bin/esbuild app.jsx — outfile=bundle.js
API преобразования вызывается, потому что флаг— bundle
отсутствует, и наш код преобразуется в файлbundle.js
со следующим кодом:
https ://gist.github.com/lawrenceagles/ca983900b7189d075cd807654594fb2e
Таким образом, мы можем видеть, что API преобразования преобразовал наш синтаксисJSX
в чистый JavaScript. - Второе, что следует отметить, это то, что по умолчанию esbuild не допускает синтаксис
JSX
в файлах.js
, поэтому нам пришлось назвать наш файлapp.jsx
. Но если мы переименуем наш файлapp.jsx
вapp.js
и попытаемся собрать или преобразовать наше приложение, мы получим ошибку, как показано ниже:
И хотя это можно исправить, добавив флаг загрузчика: — loader:.js=jsx
в команду CLI, мы также можем сделать это с помощью API сборки.
Поэтому переименуйте файл app.jsx
в app.js
и создайте файл buid.js
, содержащий следующие коды:
https://gist.github.com/lawrenceagles/1c71b91cd981df752d430db3391b4be5
Затем обновите скрипт package.json, как показано ниже:
https://gist.github.com/lawrenceagles/7981b3be6b5b7dac04fbe9d11fc26490
Теперь мы можем создать наше приложение, запустив:npm run build
Кроме того, установка для параметра bundle
значения false
указывает esbuild использовать API преобразования вместо API сборки.
Плагины
Плагины Esbuild позволяют разработчикам подключаться к процессу сборки и выполнять операции. И в отличие от API сборки и API преобразования, API плагина esbuild недоступен из интерфейса командной строки. Таким образом, вы можете использовать их только через API сборки.
И важно иметь в виду, что плагины esbuild не работают с buildSync
API, как упоминалось выше.
Одним из недостатков использования плагина API является то, что он не является зрелым. И учет документации:
API плагина новый и все еще экспериментальный. Это может измениться в будущем до версии 1.0.0 esbuild, поскольку будут раскрыты новые варианты использования. Вы можете следить за «проблемой отслеживания для получения обновлений об этой функции».
Имея это в виду, сообщество разрабатывает различные плагины, но официально они не поддерживаются. Вот список этих плагинов.
Заключение
В этой статье мы многое узнали о esbuild — невероятно быстром сборщике JavaScript следующего поколения.
Esbuild имеет минимальную функциональность по сравнению с такими сборщиками, как Webpack. Тем не менее, он обменивает эти функции на оптимальную производительность. Так что это должно быть ключевым моментом, который следует учитывать перед внедрением esbuild.
Но это решается с помощью пакета типа Vite. Vite — это многофункциональная альтернатива Webpack. Vite использует esbuild под капотом — разумно. А если вы новичок в Vite, вы можете узнать все о Vite в нашей предыдущей статье из этой серии.
Молниеносно быстрые сборщики JavaScript следующего поколения, такие как esbuild, значительно упрощают для программного обеспечения создание эффективного и высокопроизводительного кода. esbuild еще не достиг версии 1.0, и его API все еще развивается. Но поскольку нам всем нравится применять новые технологии и обновлять наш код, поэтому, даже если мы чувствуем, что все протестировали перед выпуском, всегда необходимо убедиться, что наши пользователи хорошо работают с нашим продуктом.
Такое решение, как SessionStack, позволяет нам воспроизвести пути клиентов в виде видеороликов, показывающих, как наши клиенты на самом деле работают с нашим продуктом. Мы можем быстро определить, соответствует ли наш продукт их ожиданиям или нет. Если мы видим, что что-то не так, мы можем изучить все технические детали из браузера пользователя, такие как сеть, отладочная информация и все, что касается их среды, чтобы мы могли легко понять проблему и решить ее. Мы можем проводить совместный просмотр с пользователями, сегментировать их на основе их поведения, анализировать пути пользователей и открывать новые возможности роста для наших приложений.
Существует бесплатная пробная версия, если вы хотите попробовать SessionStack.
Если вы пропустили предыдущие главы серии, вы можете найти их здесь:
- Обзор движка, среды выполнения и стека вызовов
- Внутри движка Google V8 + 5 советов по написанию оптимизированного кода
- Управление памятью + как справиться с 4 распространенными утечками памяти
- Цикл событий и развитие асинхронного программирования + 5 способов улучшить программирование с помощью async/await
- Глубокое погружение в WebSockets и HTTP/2 с SSE + как выбрать правильный путь
- Сравнение с WebAssembly + почему в некоторых случаях лучше использовать его вместо JavaScript
- Строительные блоки Web Workers + 5 случаев, когда их стоит использовать
- Сервисные работники, их жизненный цикл и вариант использования
- Механика веб-push-уведомлений
- Отслеживание изменений в DOM с помощью MutationObserver
- Движок рендеринга и советы по оптимизации его производительности
- Внутри сетевого уровня + как оптимизировать его производительность и безопасность
- Под капотом анимаций CSS и JS + как оптимизировать их производительность
- Парсинг, абстрактные синтаксические деревья (AST) + 5 советов, как минимизировать время парсинга
- Внутреннее устройство классов и наследования + транспиляция в Babel и TypeScript
- Движки хранения + как правильно выбрать API хранилища
- Внутреннее устройство Shadow DOM + как создавать автономные компоненты
- WebRTC и механика однорангового подключения
- Под капотом пользовательских элементов + Лучшие практики создания повторно используемых компонентов
- Исключения + лучшие практики для синхронного и асинхронного кода
- 5 типов XSS-атак + советы по их предотвращению
- CSRF-атаки + 7 стратегий защиты
- Итераторы + советы по расширенному управлению генераторами
- Криптография + как бороться с атаками «человек посередине (MITM)»
- Функциональный стиль и его сравнение с другими подходами
- Три типа полиморфизма
- Регулярные выражения (RegExp)
- Знакомство с Дено
- Креативные, структурные и поведенческие шаблоны проектирования + 4 лучших практики
- Модульность и возможность повторного использования с MVC
- Кроссбраузерное тестирование + советы для пререлизных браузеров
- Переменная this и контекст выполнения
- Высокопроизводительный код + 8 советов по оптимизации
- Обзор отладки + 4 совета по асинхронному коду
- Глубокое погружение в вызов, подачу заявки и связывание
- Эволюция графики
- Докеризация приложения Node.js
- Глубокое погружение в декораторов
- Лучшие практики обеспечения соответствия данных
- Прокси и отражение
- SVG и варианты его использования (часть 1)
- Статические блоки класса + 6 предлагаемых семантик
- Введение в графы и деревья
- Введение в PM2, Strongloop и Forever + 4 совета для руководителей производственных процессов
- Расширенные возможности SVG (часть 2)
- Шаблон издатель-подписчик
- Стеки и очереди + советы по эффективной реализации
- Списки vs Блокчейн + практика внедрения
- Шаблон модуля + сравнение модулей CommonJS, AMD, UMD и ES6
- Разные типы условных операторов + 3 лучших практики
- Разные способы объявления функции + 5 лучших практик
- Фабричный шаблон проектирования + 4 варианта использования
- Руководство по сборке инструментов + знакомство с Webpack, Parcel, Rollup, ES Build и Snowpack
- Создание дочернего процесса в Node.js
- Потоки и варианты их использования
- Понимание Карт и вариантов их использования + 4 преимущества по сравнению с Объектами
- Глубокое погружение в Webpack
- Как работает JavaScript: рекурсия в JavaScript, что это такое и как она используется.
- Внедрение gRPC в Nodejs
- Глубокое погружение в Vite