0

我有一个 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"
    }
  }
4

1 回答 1

0

我解决了。我有一个超时 15 秒的函数。这是一个定制的断路器。请记住,不要像 SSR angular 中那样使用 setTimout() 或 setInteval()。

于 2020-06-18T06:28:56.430 回答