Плохая производительность с профилем продукта

Question

У меня есть большой проект шлюза с угловыми библиотеками, очень плохая производительность с профилем dev, но после развертывания с улучшенным профилем prod, но все еще требуется много времени для запуска и обновления приложения (почти 15 секунд, чтобы обновить приложение).

Размер файлов пакета здесь

JHipster Version (s)

JHipster 4.14.1

"@angular/animations": "^5.2.8",
"@angular/common": "5.2.0",
"@angular/compiler": "5.2.0",
"@angular/core": "5.2.0",
"@angular/forms": "5.2.0",
"@angular/http": "^5.2.7",
"@angular/platform-browser": "5.2.0",
"@angular/platform-browser-dynamic": "5.2.0",
"@angular/router": "5.2.0",
"@ng-bootstrap/ng-bootstrap": "1.0.0",
"add-asset-html-webpack-plugin": "^2.1.3",
"angular-datatables": "^5.0.0",
"angular-froala-wysiwyg": "^2.7.6",
"angular-tree-component": "^7.2.0",
"angular2-tinymce": "^2.1.2",
"angular2-toaster": "^5.0.1",
"angular5-social-login": "^1.0.9",
"bootstrap": "4.0.0",
"codemirror": "^5.35.0",
"core-js": "2.4.1",
"datatables.net": "^1.10.16",
"datatables.net-dt": "^1.10.16",
"dropify": "^0.2.2",
"font-awesome": "4.7.0",
"hard-source-webpack-plugin": "^0.6.4",
"ionic-angular": "^3.9.2",
"jasmine-spec-reporter": "^4.2.1",
"jquery": "^3.2.1",
"ng-jhipster": "0.4.0",
"ngx-bootstrap": "^2.0.2",
"ngx-chips": "^1.6.7",
"ngx-cookie": "2.0.1",
"ngx-infinite-scroll": "0.5.1",
"ngx-select-dropdown": "^0.4.1",
"ngx-webstorage": "2.0.1",
"react-email-editor": "^0.7.0",
"read-more-directive-angular2": "^0.0.5",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.6",
"sockjs-client": "1.1.4",
"string-replace-webpack-plugin": "^0.1.3",
"summernote": "^0.8.10",
"swagger-ui": "2.2.10",
"tether": "1.4.0",
"tinymce": "^4.7.11",
"webstomp-client": "1.0.6",
"zone.js": "0.8.19"

Answer 1

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

В prod вы увидите разницу в размере, потому что у вас будут минимизированные файлы и GZipped версии , также ваш комплект поставщика не будет сгенерирован, если вы специально не включите их с помощью --vendor-chunk=true в prod .

Если ваш вопрос заключается в том, как оптимизировать пакеты, вам нужно выяснить, какие библиотеки занимают место в пакете.

Вы можете использовать такие инструменты, как webpack-bundle-analyzer , source-map-explorer для анализа пакетов, сгенерированных в среде разработчика, и в зависимости от статистики вы можете перейти к оптимизации пакета .

Один простой шаг - уменьшить размер rxjs , если ваш пакет содержит всю библиотеку rxjs. Если вы используете только несколько классов или функций из rxjs во всем приложении, то импортируйте только их.
Эти статьи могут помочь вам с оптимизацией размера пакета и другими улучшениями производительности.
как к импортным-модулям, из-rxjs-в-ан-оптимизированного-способ .
* * +1025 угловой производительности Контрольный список * * тысяча двадцать-шесть. * * Тысяча двадцать-семь 6-передовой практики, Pro-советы-для-угловому-CLI-лучше-разработчик-опыт .
анализирующие-угловые-приложения-пачка размер с-sourcemaps-исследователь . * +1033 *