Битва JavaScript Framework: «Hello World» в каждом интерфейсе командной строки

Мне просто было интересно, учитывая, что большинство крупных фреймворков JavaScript в настоящее время предлагают инструмент интерфейса командной строки (CLI) - для автоматизации создания новых проектов и создания производственных активов - как они на самом деле сравниваются друг с другом ? Я имею в виду, что они все должны иметь одинаковую «приблизительную оценку», когда дело доходит до размера пакета / производительности рендеринга, верно? Возможно, это не так близко, как вы думаете.

Я решил проверить это, установив 6 популярных инструментов CLI - Create React App, Angular CLI, Ember CLI (для Ember и Glimmer), Vue CLI, Create Inferno App и Create * Preact. App на моем ноутбуке, а затем следуйте официальной документации для каждого из них.

Меня интересовала только генерация проекта «из коробки», поэтому я добавил буквально нулевой код приложения. Я просто выполнил соответствующую команду, чтобы создать проект, а затем сразу же запустил производственную сборку ...

Я думаю, что это интересный тест, потому что, хотя каждый фреймворк может предоставить вам больше или меньше функций по умолчанию, суть здесь в том, что авторы фреймворка должны считать этот процесс сборки + скаффолда по умолчанию «лучшим из вас». собираюсь получить ' из инструмента, и вот что меня поразило в результатах.

Итак, давайте начнем в этом первом посте с рассмотрения всего двух простых показателей: размера пакета JavaScript и времени первого рендеринга JS.

Примечание: см. Https://github.com/shakyShane/arewereadyformobileyet для автоматических результатов.

Размер пакета JavaScript

Для каждого интерфейса командной строки я запускал команду «как задокументировано» для создания готовой к производству сборки. Затем я вручную архивированные Выходной сигнал ̶ (используется умолчательный Macos GZip компрессия ПараМеТров) ̶ получить эти ̶r̶e̶s̶u̶l̶t̶s̶.̶

Затем я запускаю легкий сервер, указывая на получившийся каталог build или dist с включенным Gzip. Наконец, я перекачиваю URL с этого сервера в Lighthouse и измеряю размер всего Javascript вместе взятого.

Примечания

  • Preact (и другие микролибки, не желающие загромождать диаграмму) явно выигрывают, поскольку они просто тонкий слой поверх DOM. Вы, естественно, получите больше возможностей от чего-то вроде Angular и Ember, учитывая, что они полные фреймворки, но я оставил здесь микролибу, потому что с учетом того, что PWA становятся настолько популярными / необходимыми, часто это В случае, если приложения создаются путем объединения многих из этих микро-библиотек и учитывая, что начальная точка составляет 8 КБ, вам нужно будет добавить их МНОГОЕ, прежде чем ваш код будет хоть немного приближаться к размеру того, что Ember / Angular поставляет по умолчанию.
  • Интересно, насколько близки React и Vue в настоящее время - хотя я считаю, что Vue можно дополнительно урезать в зависимости от того, какие параметры вы выбираете на этапе скаффолда CLI (я просто выбрал то, что было представлено как «по умолчанию»)
  • Angular, похоже, потерял около 50 КБ с тех пор, как я последний раз пробовал несколько месяцев назад, так что они, безусловно, добиваются прогресса;
  • Ember находится вне графика (по размеру) и на данный момент не может считаться подходящим для мобильных устройств (честно говоря, я не думаю, что они так утверждают).
  • Glimmer (от команды Ember) является новейшим, и его размер составляет 34 КБ, что, мягко говоря, впечатляет. Отличная работа.

Первый рендеринг JavaScript

Затем я снизил скорость подключения на сетевой панели Chrome Dev Tools (до обычного 3G) и применил пятикратное замедление ЦП в разделе временной шкалы. Затем я нажимаю «перезагрузить» с включенными снимками экрана и просматриваю, пока не заметил, что на экране появилось что-то, что было результатом работы фреймворка.

Конечно, есть много других способов более точного измерения - в зависимости от того, какой тип ответа вы хотите. Не говоря уже о различиях, которые могут быть сделаны с помощью SSR и т. Д., Но все же довольно очевидно, что больше JS === больше времени. Даже если бы страница была отрисована сервером и получена на стороне клиента JS-фреймворком, время рендеринга в приведенной выше диаграмме просто станет `` временем для интерактивности '', поскольку JS по-прежнему нужно загружать / анализировать / обрабатывать. -исполняется, есть ли там статический HTML или нет. Пользователя, который что-то видит на экране, просто недостаточно, если основной продукт включает интерактивность JS.

Интерактивный за 2 секунды…

Я часто слышал, что мифическая цель - `` интерактив за 2 секунды '' (с дроссельной заслонкой 3G и замедлением ЦП), и недавно на своей дневной работе я поставил цель в очень большом проекте иметь начальный пакет (достаточно JS для рендеринга, интерактивность и Ajax) меньше 50kb. Можно с уверенностью сказать, что для достижения этой цели мне потребовалось выбрать библиотеку с микровидом, такую ​​как Preact, которая из-за своего крошечного размера позволила мне «разместить» несколько важных библиотек, сохранив при этом размер менее 50 КБ.

Как я пришел к результатам

Создать приложение React

Команды:

  • Установить: yarn global add create-react-app
  • Эшафот: create-react-app cra-test
  • Производственная сборка: yarn run build
  • Размер пакета JS: 46kb
  • Первая визуализация: 770ms

Angular 2 CLI

Примечание. Почему aot не входит автоматически в target=production конфигурацию? Его очень легко пропустить, и я знал об этом только из-за пристрастия к подкастам: p

Команды:

  • Установить: yarn global add @angular/cli
  • Каркас: ng new ng-test
  • Производственная сборка: ng build --aot --target=production
  • Размер пакета JS: 92kb (4 files)
  • Первая визуализация: 1500ms

Ember CLI (приложение Ember)

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

Команды:

  • Установить:
  • - yarn global add ember-cli
  • - yarn global add bower
  • Каркас: ember new ember-test
  • Производственная сборка: ember build --target=production
  • Размер пакета JS: 198.4kb (4 files)
  • Первая визуализация: 4200ms

Ember CLI (приложение Glimmer)

Примечание. Там также появляется флаг --suppress-sizes, но когда я использовал его, создаваемый им JS-пакет оказался того же размера + вызвал ошибку в браузере.

Команды:

  • Установить: yarn global add ember-cli/ember-cli
  • Эшафот: ember new glimmer-app -b @glimmer/blueprint
  • Производственная сборка: ember build --target=production
  • Размер пакета JS: 34kb
  • Первая визуализация: 1000ms

Vue CLI

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

Команды:

  • Установить: yarn global add vue-cli
  • Эшафот: vue init webpack vue-cli (за которым следует множество вопросов)
  • Производственная сборка: npm run build
  • Размер пакета JS: 43.48kb (4 files)
  • Первая визуализация: 840ms

Создать приложение Preact

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

Команды:

  • Установить: yarn global add create-preact-app
  • Каркас: create-preact-app preact-test
  • Производственная сборка: npm run build
  • Размер пакета JS: 8.8kb
  • Первая визуализация: 412ms

Создать приложение Inferno

Команды:

  • Установить: yarn global add create-inferno-app
  • Каркас: create-inferno-app inferno-test
  • Производственная сборка: yarn run build
  • Размер пакета JS: 70kb
  • Первая визуализация: 737ms

Вам понравилось это? Возможно, вам понравятся некоторые из моих уроков на https://egghead.io/instructors/shane-osbourne - многие из них бесплатны, и я освещаю Vanilla JS, Typescript, RxJS и другие.