ASP.NET Core+Angular13中Angular Material动画卡顿故障求助

近期使用ASP.NET Core自带的Angular模板创建了首个项目，引入Angular Material组件库后，波纹效果、表单字段选择动画出现明显卡顿，效果如下：

主题配置 #

主题配置完全复制自官方文档：

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-primary,
      accent: $my-accent,
      warn: $my-warn,
    ),
  )
);
@include mat.all-component-themes($my-theme);

package.json完整内容 #

{
  "name": "oop",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "prestart": "node aspnetcore-https",
    "start": "run-script-os",
    "start:windows": "ng serve --port 44432 --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
    "start:default": "ng serve --port 44432 --ssl --ssl-cert $HOME/.aspnet/https/${npm_package_name}.pem --ssl-key $HOME/.aspnet/https/${npm_package_name}.key",
    "build": "ng build",
    "build:ssr": "ng run oop:server:dev",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.3.11",
    "@angular/cdk": "^13.3.9",
    "@angular/common": "~13.3.5",
    "@angular/compiler": "~13.3.5",
    "@angular/core": "~13.3.5",
    "@angular/forms": "~13.3.5",
    "@angular/material": "^13.3.9",
    "@angular/platform-browser": "~13.3.5",
    "@angular/platform-browser-dynamic": "~13.3.5",
    "@angular/platform-server": "~13.3.5",
    "@angular/router": "~13.3.5",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "bootstrap": "^5.1.3",
    "hammerjs": "^2.0.8",
    "jquery": "^3.6.0",
    "oidc-client": "^1.11.5",
    "popper.js": "^1.16.0",
    "run-script-os": "^1.1.6",
    "rxjs": "~7.5.5",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.4",
    "@angular/cli": "~13.3.4",
    "@angular/compiler-cli": "~13.3.5",
    "@types/jasmine": "~4.0.3",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "^17.0.29",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.19",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "typescript": "~4.6.3"
  },
  "optionalDependencies": {}
}

已排查的情况 #

• 最初怀疑ASP.NET Core模板中的NoopAnimationsModule导致冲突，移除所有相关引用后问题依旧
• 尝试切换为NoopAnimationsModule，仅进度条动画消失，其他卡顿问题仍存在
• 猜测问题可能出在ASP.NET Core对Angular模板的特殊处理，或是SSR相关，但对SSR经验不足

经过数小时调试仍无头绪，恳请各位提供帮助！

内容的提问来源于stack exchange，提问作者Jan Paweł Niepsuj