关于Angular项目文件中angular.json中的inlineCritical属性

Angular工作区根级别的angular.json文件提供工作区范围和项目特定的默认配置。这些用于AngularCLI提供的构建和开发工具。配置中给出的路径值是相对于根工作区目录的。有一个参数：inlineCritical，用于提取和内联关键的CSS定义以改进FirstContentfulPaint。默认值是true。FirstContentfulPaint(FCP)是Lighthouse报告的性能部分跟踪的六个指标之一。每个指标都捕获页面加载速度的某些方面。在Lighthouse收集的指标中，FirstContentfulPaint的单位是秒。FCP测量在用户导航到网页后浏览器呈现第一段DOM内容所花费的时间。页面上的图像、非白色元素和SVG被视为DOM内容；iframe内的任何内容都被排除在外。网站的FCP分数是该网页的FCP时间与FCP数据库中真实网站的FCP时间的比较，基于HTTP存档中的数据。例如，在第99个百分位数中执行的站点在大约1.2秒内呈现FCP。如果一个网站的FCP为1.2秒，则其FCP得分为99。如果FCP在1.8秒以内，则显示为绿色；在1.8秒到3秒内，显示橙色，超过3秒显示红色，判断为慢。inlineCritical设置对Spartacus的影响：在Angular12中，会导致SpartacusSSR加载完整样式后出现闪烁，会出现闪烁现象。考虑以下配置：projects/storefrontapp/server.tsserver.engine('html',ngExpressEngine({bootstrap:AppServerModule,//禁用SSRinlineCriticalCss:false,}));重现问题的步骤yarnbuild:libs&&yarnbuildyarnbuild:ssryarnserve:ssr:dev打开Spartacus并刷新几次-您会注意到大型SAPLogo出现闪烁。您可以从Chrome开发者工具中查看错误日志：Unabletolocatestylesheet:/Users/nikolazaric/dev/spartacus/ssr-inline-css-on-prod/dist/storefrontapp/https:/use.fontawesome.com/releases/v5.8.1/css/all.css1规则因选择器错误而被跳过：.custom-file-input:lang(en)~.custom-file-label->不匹配的伪类：lang1规则因选择器错误而被跳过：.custom-file-input:lang(en)~.custom-file-label->unmatchedpse升级到Angular14后问题消失了。