代码之家  ›  专栏  ›  技术社区  ›  Ali-Alrabi

产品配置文件的性能不佳

  •  0
  • Ali-Alrabi  · 技术社区  · 6 年前

    我有一个带角度库的大型网关项目,dev profile的性能非常差,但是在部署prod profile性能增强后,仍然需要很长时间来启动和刷新应用程序(刷新应用程序几乎需要15秒)。

    这里捆绑文件的大小

    enter image description here

    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"
    
    1 回复  |  直到 6 年前
        1
  •  0
  •   Avinash    6 年前

    你所附加的SS中的时间相对于它们各自的bundle大小来说是非常少的,我想你附加的SS是在bundle被缓存到浏览器之后。

    缩小文件 此外,除非您通过以下方式特别启用它们,否则不会生成您的供应商捆绑包 --vendor-chunk=true 生产中。

    如果您的问题是如何优化捆绑包,那么您需要找出占用捆绑包空间的库。

    你可以使用像 webpack-bundle-analyzer , source-map-explorer 要分析在dev环境中生成的bundle并根据统计信息,您可以继续优化bundle。

    一个简单的步骤是减少 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 .