Представляем Turbo для установки пакетов: В 5 раз быстрее, чем Yarn и NPM, и работает изначально в браузере

Представляем Turbo для установки пакетов: В 5 раз быстрее, чем Yarn и NPM, и работает изначально в браузере

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

 

Представляем Turbo для установки пакетов: В 5 раз быстрее, чем Yarn и NPM, и работает изначально в браузере

Turbo — это быстрый NPM-клиент, первоначально разрабатывавшийся для StackBlitz, который:

Устанавливает пакеты до 5 раз быстрее, чем Yarn и NPM

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Уменьшает размер node_modules до двух раз

Поддерживает несколько уровней дополнительной обработки для обеспечения надежности рабочих классов

Работает полностью в веб-браузере, позволяя ускорить разработку

Представляем Turbo для установки пакетов: В 5 раз быстрее, чем Yarn и NPM, и работает изначально в браузере

Фактическая скорость установки пакетов NPM с использованием Turbo на StackBlitz.com

Для чего это все?

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

Это контрастирует с опытом, который могут предоставить NPM и Yarn. Поскольку они предназначены для обработки большого количества зависимостей бэкэнд баз кода, необходимых для собственных двоичных файлов и других ресурсов, тот опыт, который они предлагают, более похож на вождения старого медленного автомобиля, а не на управление суперкаром. Но для внешнего кода редко требуется подключение такого большого количества зависимостей — так спрашивается, зачем это делать? Однако, эти зависимости по прежнему задействуются в процессе установки как dev- и sub- зависимостей и загружаются и извлекаются все так же. И в результате мы получаем все ту же черную дыру, под названием node_modules:

Представляем Turbo для установки пакетов: В 5 раз быстрее, чем Yarn и NPM, и работает изначально в браузере

Приведенный выше мэм хорошо иллюстрирует ситуацию

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

Итак, если NPM сам не может работать в браузере, что, если мы построим совершенно новый NPM-клиент с нуля?

Решение: более умный, быстрый менеджер пакетов, созданный специально для Интернета

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Скорость и эффективность Turbo в значительной степени достигаются за счет использования тех же самых технологий, которые применяют современные интерфейсные приложения для увеличения производительности — tree-shaking, отложеная загрузка и простые XHR / выборки с помощью gzip.

Извлекает только файлы, которые вам на самом деле нужны, по запросу

Вместо того, чтобы загружать все архивы, Turbo работает интеллектуально и извлекает из основных, типизированных и других соответствующих полей только файлы, которые непосредственно необходимы. Это позволяет избавиться от огромного количества мертвого объема в отдельных пакетах и, тем более, в крупных проектах:

Представляем Turbo для установки пакетов: В 5 раз быстрее, чем Yarn и NPM, и работает изначально в браузере

Сравнение общего размера сжатой полезной нагрузки для RxJS и RealWorld Angular

Итак, что произойдет, если вы импортируете файл, который не требуется в основном поле, например, файл Sass ? Нет проблем — Turbo просто отложено загружает его по требованию и сохраняет для будущего использования, подобно тому, как работает новый протокол GVFS Git от Microsoft.

Надежное кэширование с множеством стратегий перехода на другой ресурс

Недавно мы выпустили CDN специально под Turbo, который собирает любой пакет NPM в одном запросе JSON с поддержкой gzipped, что позволило значительно ускорить процесс загрузки пакетов. Эта концепция похожа на tarballs NPM, которая объединяет все файлы в пакете и архивирует их в gzips, в то время как таймер Turbo разумно объединяет только файлы, которые требуется вашему приложению, и архивирует их в gzips.

Каждый клиент Turbo работает автономно в браузере и автоматически загружает соответствующие файлы по запросу непосредственно из CDN класса производительности jsDelivr, если пакет не может быть извлечен из кэша. Но что, если jsDelivr тоже опущен? Без проблем — он затем переключается на использование CDN от Unpkg, предоставляя вам три отдельных уровня альтернативной обработки для сверхнадежной установки пакетов.

Молниеносная обработка зависимостей

Чтобы обеспечить минимальные размеры полезной нагрузки, Turbo использует алгоритм пользовательского разрешения для агрессивного преобразования общих версий пакетов, когда это возможно. Это также сверх быстрое и надежное решение: безсерверная версия распознавателя имеет доступ к полному набору данных NPM в памяти и преобразует любой package.json меньше чем за 85 мс. Если у Turbo есть какие-либо проблемы с подключением к безсерверному преобразователю, он корректно выходит из процесса в браузере и извлекает все необходимые метаданные для преобразования.

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

Представляем Turbo для установки пакетов: В 5 раз быстрее, чем Yarn и NPM, и работает изначально в браузере

Поскольку никто не читает эти предупреждения о том, что пайпы npm выводят на консоль

Масштабируемость проверена на практике

Turbo теперь надежно обрабатывает десятки миллионов запросов каждый месяц, используя при этом незначительное количество ресурсов, и мы также рады объявить, что команда Google Angular недавно выбрала StackBlitz для включения всех онлайн-примеров, которые миллионы разработчиков используют в своих документах!

Теперь наша технология доступна для ознакомления и тестирования онлайн

Turbo размещен онлайн на StackBlitz.com, и во время фазы предварительного ознакомления с технологией мы будем запускать огромное количество тестов, демонстрирующих его скорость, эффективность и надежность, и все ваши отзывы имеют решающее значение — так что, пожалуйста, пишите о любых проблемах, с которыми вы сталкиваетесь, или связывайтесь с нами в нашем сообществе Discord!

В то время как Turbo первоначально был предназначен для использования в серийной версии в реальной среде IDE, некоторые люди уже применили его на нескольких игровых площадках, а участники нашего сообщества даже начали прототипирование метода включения скрипта type=module для работы с Turbo (круто, правда?). Мы не можем дождаться того момента, когда увидим другие потрясающие вещи, которые придумают люди, поэтому, как только проверка API будет завершена, мы откроем исходные коды Turbo (как и многих другие частей StackBlitz) в нашем нашем репозитории на Github.

Наконец, мы хотим сердечно поблагодарить команду Google Angular за то, что она решила сделать ставку на наши технологии, и команду Google Cloud за их потрясающий сервис плюс спонсирование серверов, на которых работает Turbo!

Автор: Eric Simons

Источник: https://medium.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по NodeJS. Основы

Прямо сейчас посмотрите курс по NodeJS!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree