angular - Angular SSR 构建时间过长

问题描述

我有一个 SSR angular APP，在浏览器中输入 url 后最多需要 15 秒才能看到内容。当它请求 index.html 文件时，请求时间如下所示： Tmings for index.html request

额外的时间有时在“排队”中分配，有时在“等待 TTFB”中分配大约 15 秒。这次是不幸的 35 秒。在本地环境中，它是 15 秒固定的。

我进行了一些搜索，阅读了一些帖子，并注意到它与构建期间在服务器端发出的 Http 请求有关。当它没有到达 API 时，没有延迟并在 1-5 秒内加载。如果我做一个请求（即使是少量的数据），应用程序构建速度会减慢到固定的 15 秒。我做了一些控制台日志记录，虽然问题与 http 请求有关，但请求不会花费很长时间。

控制台日志测试- 开始 - 它是 url 输入时间，响应 - 内部 api 请求完成时间，完成 - 构建完成时间

请注意，api 响应在 400 毫秒内出现，但构建仅在 15 秒后“完成”。我认为它可能与 ngZone 或其他东西有关，但我根本不明白这件事。

这是我的 tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "target": "es2015",
    "module": "es2015",
    "types": [],
    "lib": ["es2017", "dom"]
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

和 tsconfig.server.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app-server",
    "baseUrl": "."
  },
  "exclude": ["test.ts", "**/*.spec.ts"],
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

这些是我的依赖：

 "dependencies": {
    "@angular-devkit/core": "^7.3.3",
    "@angular/animations": "^7.2.7",
    "@angular/cdk": "^6.0.0-rc.12",
    "@angular/common": "^7.2.7",
    "@angular/compiler": "^7.2.7",
    "@angular/core": "^7.2.7",
    "@angular/forms": "^7.2.7",
    "@angular/http": "^7.2.7",
    "@angular/platform-browser": "^7.2.7",
    "@angular/platform-browser-dynamic": "^7.2.7",
    "@angular/platform-server": "^7.2.7",
    "@angular/pwa": "^0.10.7",
    "@angular/router": "^7.2.7",
    "@angular/service-worker": "^7.2.7",
    "@fortawesome/angular-fontawesome": "^0.1.1",
    "@fortawesome/fontawesome-free": "^5.7.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.15",
    "@fortawesome/free-solid-svg-icons": "^5.7.2",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "@ngrx/effects": "^7.3.0",
    "@ngrx/store": "^7.3.0",
    "@ngrx/store-devtools": "^7.3.0",
    "@ngu/carousel": "^1.5.5",
    "@nguniversal/express-engine": "0.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "@ngx-pwa/offline": "^6.1.0",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@types/cors": "^2.8.4",
    "@types/express": "^4.16.1",
    "@types/hammerjs": "^2.0.36",
    "@types/lodash": "^4.14.121",
    "add-to-homescreen": "^3.2.6",
    "ajv": "^6.9.2",
    "ansi-styles": "^3.2.1",
    "axios": "^0.19.2",
    "bootstrap-css-only": "^4.3.1",
    "bootswatch": "^4.3.1",
    "core-js": "^2.6.5",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "hammer-timejs": "^1.1.0",
    "hammerjs": "^2.0.8",
    "http-proxy-middleware": "^0.18.0",
    "js-sha1": "^0.6.0",
    "lazysizes": "^5.2.0",
    "lodash-es": "^4.17.15",
    "mobile-detect": "^1.4.3",
    "mock-browser": "^0.92.14",
    "mock-location": "^0.2.0",
    "mysql": "^2.17.1",
    "ng2-nouislider": "^1.7.13",
    "ngrx-store-localstorage": "^5.1.1",
    "ngx-cookie-service": "^2.1.0",
    "ngx-i18nsupport": "^0.17.1",
    "ngx-infinite-scroll": "^6.0.1",
    "ngx-owl-carousel-o": "^1.1.7",
    "ngx-pinch-zoom": "^1.2.3",
    "ngx-toastr": "^10.0.4",
    "node-sass": "^4.12.0",
    "nouislider": "^12.1.0",
    "path": "^0.12.7",
    "public-holidays": "^0.2.2",
    "redis": "^2.8.0",
    "redis-parser": "^3.0.0",
    "request": "^2.88.0",
    "rxjs": "6.4.0",
    "rxjs-compat": "^6.4.0",
    "webpack-cli": "^3.3.10",
    "winston": "^3.2.1",
    "xml2js": "^0.4.19",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular/cli": "^7.3.4",
    "@angular/compiler-cli": "^7.2.7",
    "@angular/language-service": "^7.2.7",
    "@types/dotenv": "^8.2.0",
    "@types/jasmine": "^2.8.16",
    "@types/jasminewd2": "~2.0.2",
    "@types/mysql": "^2.15.8",
    "@types/node": "~6.0.60",
    "@types/redis": "^2.8.0",
    "codelyzer": "^4.0.1",
    "husky": "^1.3.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.4.3",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-viewport": "^1.0.4",
    "prettier": "1.15.3",
    "pretty-quick": "^1.10.0",
    "protractor": "^5.4.2",
    "puppeteer": "^1.16.0",
    "ts-loader": "^5.2.0",
    "ts-node": "^4.1.0",
    "tslint": "~5.9.1",
    "typescript": "3.2.4",
    "webpack-bundle-analyzer": "^3.6.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }

标签： angularrequestserver-side-renderingtime-to-first-byte

angular - Angular SSR 构建时间过长

问题描述

解决方案

推荐阅读