Angular12 noscript样式加载逻辑确认及禁用方法咨询

1. 渲染逻辑正确性说明 #

• 该渲染逻辑是Angular 12及以上版本默认启用的官方特性，逻辑完全符合设计预期：
  • 核心目的是优化首屏加载性能：将样式表初始media属性设为print时，浏览器会将其标记为非阻塞资源，优先加载页面核心内容，样式加载完成后通过onload事件将media切换为all，正式生效样式
  • noscript标签是为禁用JavaScript的场景做兜底，保证样式仍能正常加载
• 你遇到的弱网下初始几秒显示异常是该优化的典型副作用：即无样式内容闪烁（FOUC），样式资源未加载完成前，页面会先展示无样式的裸内容，等样式加载完成才会渲染为正常效果。

2. 禁用该功能的方法 #

直接修改项目根目录下的angular.json配置即可：

1. 找到projects -> [你的项目名] -> architect -> build -> options配置节点
2. 在options中新增配置项：

"inlineCritical": false

3. 重启本地开发服务/重新执行生产构建，后续打包出来的index.html就不会再生成上述的print media延迟加载样式的逻辑，样式会作为阻塞资源直接加载，弱网下不会再出现无样式闪烁的问题。

内容的提问来源于stack exchange，提问作者Daniel Ehrhardt