产品性能不佳

Question

我有一个大型的带有角度库的网关项目，开发配置文件的性能非常差，但是在部署了prod配置文件后，性能得到了增强，但是启动和刷新应用程序仍需要很长时间（刷新应用程序大约需要15秒）。

此处捆绑文件的大小

JHipster版本

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是将捆绑包缓存在浏览器中之后的。

在产品中，您会看到大小上的差异，因为您将拥有缩小文件和 GZipped版本，并且除非您通过{{1 }}在产品中。

如果您的问题是如何优化捆绑软件，则需要找出正在占用捆绑软件空间的库。

您可以使用webpack-bundle-analyzer，source-map-explorer之类的工具来分析在开发环境中生成的捆绑软件，并根据统计信息继续优化捆绑软件。

一个简单的步骤是减小捆绑包的 rxjs 的大小（如果它具有整个rxjs库）。如果您在整个应用中仅使用了rxjs中的几个类或函数，则仅导入它们。
这些文章可以帮助您优化捆绑包大小和其他性能增强功能。
how-to-import-modules-from-rxjs-in-an-optimized-manner。
angular-performance-checklist。
6-best-practices-pro-tips-for-angular-cli-better-developer-experience。
analyzing-angular-apps-bundle-size-with-sourcemaps-explorer。