Угловой 2 CLI огромный пакет поставщиков: как улучшить размер для prod?

У меня есть простое приложение, инициализированное angular-cli .

Он отображает некоторые страницы относительно 3 маршрутов. У меня есть 3 компонента. На одной из этих страниц я использую модули lodash и Angular2 Http для получения некоторых данных (используя Rxjs Observables, карту и подписку). Я показываю эти элементы с помощью простого ngFor.

Но, несмотря на то, что мое приложение действительно просто, я получаю ОГРОМНЫЙ (на мой взгляд) пакет пакетов и карты. Я не говорю о версиях gzip, но размером до gzipping. Этот вопрос – это всего лишь общие рекомендации.

Некоторые результаты тестов:

ng build

Хеш: 8efac7d6208adb8641c1 Время: 10129ms chunk {0} main.bundle.js, main.bundle.map (основной) 18.7 kB {3} [начальный] [оказанный]

chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 155 kB {4} [initial] [rendered]

chunk {2} scripts.bundle.js, scripts.bundle.map (скрипты) 128 kB {4} [начальный] [вынесенный]

chunk {3} vendor.bundle.js, vendor.bundle.map (поставщик) 3,96 МБ [начальный] [оказанный]

chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 байт [запись] [отображается]

Подождите: пакет пакета поставщиков 10Mb для такого простого приложения?

ng build –prod

Хеш: 09a5f095e33b2980e7cc Время: 23455ms chunk {0} main.6273b0f04a07a1c2ad6c.bundle.js, main.6273b0f04a07a1c2ad6c.bundle.map (main) 18.3 kB {3} [initial] [rendered]

chunk {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css, styles.bfdaa4d8a4eb2d0cb019.bundle.map, styles.bfdaa4d8a4eb2d0cb019.bundle.map (styles) 154 kB {4} [initial] [rendered]

chunk {2} scripts.c5b720a078e5464ec211.bundle.js, scripts.c5b720a078e5464ec211.bundle.map (скрипты) 128 kB {4} [начальный] [вынесенный]

chunk {3} vendor.07af2467307e17d85438.bundle.js, vendor.07af2467307e17d85438.bundle.map (поставщик) 3.96 MB [начальный] [оказанный]

chunk {4} inline.a345391d459797f81820.bundle.js, inline.a345391d459797f81820.bundle.map (inline) 0 байт [запись] [отображается]

Подождите еще раз: такой же размер пакета поставщика для prod?

 ng build --prod --aot 

Хэш: 517e4425ff872bbe3e5b Время: 22856ms chunk {0} main.95eadabace554e3c2b43.bundle.js, main.95eadabace554e3c2b43.bundle.map (main) 130 kB {3} [начальный] [оказано]

chunk {1} styles.e53a388ae1dd2b7f5434.bundle.css, styles.e53a388ae1dd2b7f5434.bundle.map, styles.e53a388ae1dd2b7f5434.bundle.map (styles) 154 kB {4} [initial] [rendered]

chunk {2} scripts.e5c2c90547f3168a7564.bundle.js, scripts.e5c2c90547f3168a7564.bundle.map (скрипты) 128 kB {4} [initial] [rendered]

chunk {3} vendor.41a6c1f57136df286f14.bundle.js, vendor.41a6c1f57136df286f14.bundle.map (поставщик) 2.75 МБ [начальный] [оказанный]

chunk {4} inline.97c0403c57a46c6a7920.bundle.js, inline.97c0403c57a46c6a7920.bundle.map (inline) 0 байт [запись] [отображается]

 ng build --aot 

Хэш: 040cc91df4df5ffc3c3f Время: 11011ms chunk {0} main.bundle.js, main.bundle.map (основная) 130 kB {3} [начальная] [оказана]

chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 155 kB {4} [initial] [rendered]

chunk {2} scripts.bundle.js, scripts.bundle.map (скрипты) 128 kB {4} [начальный] [вынесенный]

chunk {3} vendor.bundle.js, vendor.bundle.map (поставщик) 2.75 МБ [начальный] [вынесенный]

chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 байт [запись] [отображается]

Итак, несколько вопросов для развертывания моего приложения в prod:

  • Почему пакеты поставщиков настолько огромны?
  • Правильно ли используется дробление деревьев угловыми кликами?
  • как улучшить размер этого пакета?
  • Нужны ли файлы .map?
  • Являются ли функции тестирования включенными в комплекты? Я не нуждаюсь в них в продуктах.
  • Общий вопрос: какие рекомендуемые инструменты для упаковки для prod? Может быть, угловое cli (используя webpack в фоновом режиме) не подходит? Может ли сделать БОЛЬШЕ?

Я искал много дискуссий о переполнении стека, но я не нашел никакого общего вопроса.

Некоторые утверждают, что использование компиляции AOT может уменьшить размер пакета поставщика до 250 кб. Тем не менее, в примере BlackHoleGalaxy он использует компиляцию AOT и по-прежнему остается с пакетом вендоров размером 2,75 МБ с ng build --prod --aot , в 10 раз больше, чем предполагаемый 250kb. Это не является нормой для приложений с угловым2, даже если вы используете v4.0. 2.75 МБ по-прежнему слишком велико для тех, кто действительно заботится о производительности, особенно на мобильном устройстве.

Есть несколько вещей, которые вы можете сделать, чтобы помочь в выполнении вашего приложения:

1) AOT & Tree Shaking (угловой-cli делает это из коробки)

2) Использование Angular Universal AKA на стороне сервера (не в cli)

3) Веб-работники (опять же, не в cli, но очень запрошенная функция)
см. https://github.com/angular/angular-cli/issues/2305

4) Служащие службы
см .: https://github.com/angular/angular-cli/issues/4006

Вам может не понадобиться все это в одном приложении, но это некоторые из параметров, которые в настоящее время имеются для оптимизации работы с угловыми характеристиками. Я верю / надеюсь, что Google знает о недостатках с точки зрения производительности и планирует улучшить это в будущем.

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

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

Используйте последнюю версию углового cli и используйте команду ng build –prod –build-optimizer. Это определенно уменьшит размер сборки для prod env.

Это то, что делает оптимизатор построения под капотом:

Оптимизатор сборки имеет два основных задания. Во-первых, мы можем отметить части вашего приложения как чистые, это улучшает дрожание дерева, предоставляемое существующими инструментами, удаляя дополнительные части вашего приложения, которые не нужны.

Во-вторых, оптимизатор построения – это удаление угловых декодеров из кода выполнения приложения. Декораторы используются компилятором и не нужны во время выполнения и могут быть удалены. Каждая из этих заданий уменьшает размер ваших пакетов JavaScript и увеличивает скорость загрузки вашего приложения для ваших пользователей.

Примечание . Одно обновление для Angular 5, ng build -prod автоматически позаботится о вышеописанном процессе 🙂

Во-первых, пакеты поставщиков огромны просто потому, что Angular 2 полагается на множество библиотек. Минимальный размер для приложения Angular 2 составляет около 500 КБ (в некоторых случаях 250 КБ , см. Нижнюю позицию).
angular-cli правильно используется angular-cli .
Не включайте файлы .map , потому что они используются только для отладки. Кроме того, если вы используете модуль горячей замены, удалите его, чтобы осветлить поставщика.

Чтобы пакет для производства, я лично использую Webpack (и angular-cli полагается на него ), потому что вы действительно можете configure everything для оптимизации или отладки.
Если вы хотите использовать Webpack , я согласен, что это немного сложнее первого взгляда, но посмотрите учебные пособия в сети, вы не будете разочарованы.
Else, используйте angular-cli , которые выполняют работу очень хорошо.

Использование компиляции «Вперед» является обязательным для оптимизации приложений и сжатия Углового 2 приложения до 250 КБ .

Вот репо, которое я создал ( github.com/JCornat/min-angular ), чтобы проверить минимальный размер углового пучка, и я получаю 384 КБ . Я уверен, что есть простой способ его оптимизировать.

Говоря о больших приложениях, используя конфигурацию AngularClass / angular-starter , такую ​​же, как и в репо выше, размер моего пакета для больших приложений ( 150+ компонентов ) перешел от 8 МБ (4 МБ без файлов карт) до 580 КБ .

Lodash может внести часть кода ошибок в ваш комплект в зависимости от того, как вы импортируете из него. Например:

 // includes the entire package (very large) import * as _ from 'lodash'; // depending on your buildchain, may still include the entire package import { flatten } from 'lodash'; // imports only the code needed for `flatten` import flatten from 'lodash-es/flatten' 

Лично я все еще хотел получить меньшие следы от моих функций полезности. Например, flatten может 1.2K до 1.2K до вашего пакета после минимизации. Поэтому я создал compilation упрощенных функций lodash. Моя реализация flatten составляет около 50 bytes . Вы можете проверить это здесь, чтобы узнать, работает ли оно для вас: https://github.com/simontonsoftware/micro-dash

Следующее решение предполагает, что вы обслуживаете свою dist / папку с помощью nodejs. Пожалуйста, используйте следующие app.js на корневом уровне

 const express = require('express'),http = require('http'),path = require('path'),compression = require('compression'); const app = express(); app.use(express.static(path.join(__dirname, 'dist'))); app.use(compression()) //compressing dist folder app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist/index.html')); }) const port = process.env.PORT || '4201'; app.set('port', port); const server = http.createServer(app); server.listen(port, () => console.log('Running at port ' + port)) 

Убедитесь, что вы устанавливаете зависимости;

 npm install compression --save npm install express --save; 

Теперь создайте приложение

 ng build --prod --build-optimizer 

Если вы хотите еще больше сжать сборку, скажите, уменьшите 300kb (приблизительно), а затем выполните описанный ниже процесс;

Создайте папку под названием vendor внутри папки src и внутри папки поставщика создайте файл rxjs.ts и вставьте в него код внизу;

 export {Subject} from 'rxjs/Subject'; export {Observable} from 'rxjs/Observable'; export {Subscription} from 'rxjs/Subscription'; 

А затем добавьте tsconfig.json файле tsconfig.json в вашем приложении angular-cli. Затем в compilerOptions добавьте следующий json;

 "paths": { "rxjs": [ "./vendor/rxjs.ts" ] } 

Это сделает ваш размер сборки слишком малым. В моем проекте я уменьшил размер от 11 до 1 мб. Надеюсь, поможет

Одна вещь, которую я хочу поделиться, – это то, как импортированные библиотеки увеличивают размер dist. У меня был пакет с угловым2-моментом, в то время как я мог делать все форматирование времени даты, которое я требовал, используя стандартную DatePipe, экспортированную из @ angular / common.

С угловым2-моментом "angular2-moment": "^1.6.0",

chunk {0} polyfills.036982dc15bb5fc67cb8.bundle.js (polyfills) 191 kB {4} [начальный] [оказанный] chunk {1} main.e7496551a26816427b68.bundle.js (main) 2.2 MB {3} [начальный] [оказанный] chunk {2} styles.056656ed596d26ba0192.bundle.css (styles) 69 bytes {4} [initial] [rendered] chunk {3} vendor.62c2cfe0ca794a5006d1.bundle.js (поставщик) 3.84 MB [начальный] [оказанный] chunk {4 } inline.0b9c3de53405d705e757.bundle.js (inline) 0 байт [запись] [отображается]

После удаления Angular2-moment и использования DatePipe вместо этого

chunk {0} polyfills.036982dc15bb5fc67cb8.bundle.js (polyfills) 191 kB {4} [initial] [rendered] chunk {1} main.f2b62721788695a4655c.bundle.js (main) 2.2 MB {3} [начальный] [оказано] chunk {2} styles.056656ed596d26ba0192.bundle.css (styles) 69 bytes {4} [initial] [rendered] chunk {3} vendor.e1de06303258c58c9d01.bundle.js (поставщик) 3.35 MB [начальный] [оказанный] chunk {4 } inline.3ae24861b3637391ba70.bundle.js (inline) 0 байт [запись] [отображается]

Обратите внимание, что пакет поставщиков сократил вдвое меньше мегабайта!

Точнее, стоит проверить, какие угловые стандартные пакеты могут делать, даже если вы уже знакомы с внешней библиотекой.

Другой способ уменьшить пакет – это использовать GZIP вместо JS. Мы пошли от 2,6 мБ до 543ко.

https://httpd.apache.org/docs/2.4/mod/mod_deflate.html

  • Как использовать jQuery с угловым?
  • Как загрузить файл с помощью Angular2
  • Angularjs: Служба, которая обслуживает несколько URL-адресов ресурсов / источников данных?
  • использование внешних JS-библиотек в моем проекте с угловым 2
  • Почему мы используем $ rootScope. $ Broadcast в AngularJS?
  • Как использовать плагин jQuery с угловым 4?
  • Angular2 - динамически загружать компонент из модуля
  • ctorParameters.map не является функцией в угловом2-mdl
  • В чем разница между декларациями, поставщиками и импортом в NgModule
  • Как импортировать угловой материал в проект?
  • Angular2: использовать Pipe для визуализации шаблонов динамически
  • Давайте будем гением компьютера.