关于前端:关于-Angular-工程文件-angularjson-里的-inlineCritical-属性

36次阅读

共计 1249 个字符，预计需要花费 4 分钟才能阅读完成。

Angular 工作区根级别的 angular.json 文件提供工作区范畴和我的项目特定的默认配置。这些用于 Angular CLI 提供的构建和开发工具。配置中给出的门路值是绝对于根工作区目录的。

其中有个参数：inlineCritical，用于提取和内联要害 CSS 定义以改良 First Contentful Paint，默认值为 true.

First Contentful Paint (FCP) 是 Lighthouse 报告的性能局部跟踪的六个指标之一。每个指标都捕捉页面加载速度的某些方面。

在 Lighthouse 采集的指标里，First Contentful Paint 的单位是秒。

FCP 测量在用户导航到 Web 页面后浏览器出现第一段 DOM 内容所破费的工夫。

页面上的图像、非红色 <canvas> 元素和 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 的影响：

在 Angular 12 里会导致 Spartacus SSR 在加载残缺款式后闪动，呈现 flicker 景象。

思考下列配置：projects/storefrontapp/server.ts

 server.engine(
    'html',
    ngExpressEngine({
      bootstrap: AppServerModule,
      // disable for SSR
      inlineCriticalCss: false,
    })
  );

yarn build:libs && yarn build
yarn build:ssr
yarn serve:ssr:dev

关上 Spartacus 并刷新几次 – 就能够留神到 SAP 大的 Logo 呈现 flicker.

从 Chrome 开发者工具里能看到谬误日志：

Unable to locate stylesheet: /Users/nikolazaric/dev/spartacus/ssr-inline-css-on-prod/dist/storefrontapp/https:/use.fontawesome.com/releases/v5.8.1/css/all.css
1 rules skipped due to selector errors:
.custom-file-input:lang(en)~.custom-file-label -> unmatched pseudo-class :lang
1 rules skipped due to selector errors:
.custom-file-input:lang(en)~.custom-file-label -> unmatched pse

降级到 Angular 14 后问题隐没。

正文完