с 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.
Спасибо.