с Angular-CLI

Компиляция с опережением времени (AoT) - ключевая особенность Angular 2. Она дает нам большую производительность и небольшой размер полезной нагрузки. Давай попробуем легко. Хорошие новости: Angular-CLI начал поддержку AoT экспериментально!

Установить CLI

Введите команду для установки пакета angular-cli в глобальном

> npm install -g angular-cli

После установки проверьте версию.

> ng version
angular-cli: 1.0.0-beta.16
node: 6.7.0
os: darwin x64

Создать проект

Создать новый проект с помощью интерфейса командной строки

> ng new example-app

На это уходит много времени. Потерпи…

После этого переходим в сгенерированный каталог.

> cd example-app

Сборка в режиме JiT

Сначала построим проект в режиме JiT. Введите команду:

> ng build

Созданные файлы будут находиться в каталоге dist.

Изучить комплект

Давайте исследуем и измерим связанный файл. Установите инструмент из npm:

> npm install -g source-map-explorer

И используйте source-map-explorer для пакета и исходной карты

> source-map-explorer dist/main.bundle.js dist/main.map

Веб-браузер открывается автоматически и показывает график, рассказывающий об элементах пакета!

Потрясающие! Теперь мы видим, что `@ angular / compiler` - самый большой модуль. В режиме JiT все приложения Angular требуют компилятора во время выполнения. В режиме AoT этого не происходит. Давай убедимся.

Сборка в режиме AoT

Примечание. Поддержка Angular-CLI AoT пока еще экспериментальная.

Для сборки с AoT используйте параметр - aot.

> ng build --aot

И еще раз исследуем связку.

> source-map-explorer dist/main.bundle.js dist/main.map

Агаааааа Мы удалили модуль `@ angular / compiler` из нашего пакета! С помощью AoT-компиляции мы можем удалить файлы, которые больше не используются во время выполнения, и можем сократить время первоначальной потери при компиляции.

Заключение

  • Angular-CLI экспериментально запустил поддержку AoT
  • `source-map-explorer` - отличный инструмент для измерения нашего пакета

Если вы еще не смотрели, я рекомендую вам это видео, отличное занятие Мартина об оптимизации пакета на AngularConnect 2016.

Спасибо.