Angular SSR构建时间太长

Question

我有一个SSR angular应用程序，在浏览器中输入url后，它需要15秒才能看到内容。当它请求index.html文件时，请求时间看起来像这样：Tmings for index.html request

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

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

console logging test -开始- url输入时间，响应-内部api请求完成时间，完成-构建完成时间

请注意，api响应在400ms之内，但构建在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"
    }
  }

Answer 1

我解决了。我有一个函数超时了15秒。这是一个定制的断路器。请记住，不要在SSR angular中使用setTimout()或setInteval()之类的东西。