node.js - 由于 zone.js，Angular7 在 Google Page Speed 上的性能降低

Question

我使用 Angular 7 作为 ssr，我们发现我们的应用程序在 Google Page Speed 方面存在严重问题，并且所有问题都集中到 zone.js

页面速度提示脚本估值太高，在分解应用程序后，我们发现问题与polyfills有关，但是，polyfills仅包含

  import 'zone.js/dist/zone.js';  // Included with Angular CLI.
  import 'classlist.js/classList.min.js';
  import 'web-animations-js/web-animations.min.js';

然后我们所做的就是完全删除polyfills文件中的所有内容，将其留空，然后直接从index.html底部的CDN添加这些文件，如下所示:

<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.201711092/classList.min.js"></script>

结果是一样的，页面速度仍然提示脚本评估，但是，我们设法减少了 50% 的脚本评估，但是，仍然非常糟糕。

我们使用的是 zone.js@0.8.10，然后我们升级到最新版本，但什么也没有。结果相同。

事实上，这正在影响我们所有的应用程序，无论我们构建为 aot 还是服务器端渲染，结果都是相同的。

有谁知道如何解决页面速度问题？作为 SSR，我们的排名在 100 名中低于 20 名。

这没有任何意义，它应该更快，而不是更慢？

image page speed polyfills

package.json

      "scripts": {
  "ng": "ng",
  "start": "ng serve --watch --open --progress",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "build:ssr": "rimraf dist && npm run build:client-and-server-bundles && npm run webpack:server -p",
  "serve:ssr": "node dist/server.js",
  "build:client-and-server-bundles": "node --max_old_space_size=4000 node_modules/@angular/cli/bin/ng build --prod && ng run micksgarage-project:server",
  "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
  "bundle-report": "webpack-bundle-analyzer dist/*/stats.json"
},
"private": true,
"dependencies": {
  "@angular-devkit/build-optimizer": "^0.802.0",
  "@angular/common": "~7.2.0",
  "@angular/compiler": "~7.2.0",
  "@angular/core": "~7.2.0",
  "@angular/forms": "~7.2.0",
  "@angular/http": "~7.2.0",
  "@angular/platform-browser": "~7.2.0",
  "@angular/platform-browser-dynamic": "~7.2.0",
  "@angular/platform-server": "~7.1.0",
  "@angular/pwa": "^0.12.4",
  "@angular/router": "~7.2.0",
  "@angular/service-worker": "~7.2.0",
  "@nguniversal/express-engine": "~7.1.0",
  "@nguniversal/module-map-ngfactory-loader": "~7.1.0",
  "classlist.js": "^1.1.20150312",
  "core-js": "~2.5.4",
  "rxjs": "~6.3.3",
  "rxjs-compat": "~6.3.3",
  "zone.js": "^0.10.1"
},
"devDependencies": {

angular.json 作为 angular.io SSR 配置加上:

          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": true,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": true,
          "commonChunk": true,
          "buildOptimizer": true,
          "statsJson": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            }
          ],
          "serviceWorker": true,
          "ngswConfigPath": "src/ngsw-config.json"

我什至尝试使用 zone-evergreen.min.js 看一下屏幕截图

我还发现很多网站都存在同样的问题，与 polyfills.ts 相关或 Google Page 速度有问题，您可以在此处查看 https://www.madewithangular.com/categories/angular/任何使用 Angular 制作的网站都存在 zone.js 的问题。请检查任何网站，将 URL 复制并粘贴到 Page Speed 中，您会一遍又一遍地看到相同的问题，这不是巧合。

• https://www.delta.com/eu/en
• https://www.forbes.com

还有更多。

Answer 1

基本上，Angular 使用 Zone.js 在每次发生异步事件时运行更改检测。

问题不在于区域本身。考虑发布应用程序的某些部分(也许在 stackblitz 上)。

第一个猜测:您是否使用函数进行模板绑定(bind)？ (或 setter/getter !)

// component.HTML
<p>{{ getName() }}</p>

// component.TS
getName(): string {
    return 'John Doe';
}

如果答案是肯定的，则在每个异步事件(鼠标移动、单击...)上调用函数，并且每次触发事件时，都会运行更改检测并检查所有值是否发生更改。

希望有帮助。