Angular 视图

可延迟视图（也称为 @defer 块）通过延迟加载对页面初始渲染并非绝对必要的代码来减少应用程序的初始包大小。这通常会导致初始加载速度更快，并改善核心网络指标 (CWV)，主要是最大内容绘制 (LCP) 和首次字节时间 (TTFB)。

使用 Angular 的延迟视图，开发人员可以将模板的一部分包装在 @defer 块中以延迟其加载：

@defer {
  
}

这可确保 @defer 块内的任何组件、指令或管道的代码都被分成单独的 JavaScript 文件，并且仅在需要时加载，从而允许主模板更快地呈现。

Angular Defer View 的主要功能和触发器

Angular 延迟视图提供了各种触发器、预取选项和子块来有效地管理占位符、加载状态和错误处理。

**触发器**

可以使用特定的触发器来控制延迟内容的渲染：

idle：当浏览器空闲时呈现视图（默认行为）。

立即：在主内容加载后立即呈现视图。

timer(...)：延迟渲染指定的时间（例如，on timer(500ms)）。

viewport(...)：当视图在视口中可见时渲染视图。

interaction(...)：在用户交互（例如单击或按下键盘）后呈现视图。

hover(...)：当用户将鼠标悬停在元素上时呈现视图。

when(...)：根据自定义条件呈现视图。

Angular 的 @defer 块允许开发人员为内容加载的不同阶段定义子块：

@placeholder：在延迟部分触发之前显示内容。

@defer {
  
} @placeholder {
  Loading content...
}

@loading：在延迟依赖项加载时显示内容

@defer {
  
} @loading {
  
}

@error：如果延迟加载失败，提供后备内容

@defer {
  
} @error {
  Failed to load component.
}

Angular 允许预取在内容呈现之前加载延迟的 JavaScript 文件。可以使用 prefetch 选项指定：

@defer (on interaction; prefetch on idle) {
  
} @placeholder {
  Placeholder content
}

**避免嵌套加载：**对嵌套的@defer 块使用不同的触发器，以防止同时出现加载峰值。

**最小化布局偏移**：确保在初始视口中可见的延迟组件不会破坏布局稳定性。

要深入了解 Angular 延迟视图，请查看官方 Angular 指南并立即开始简化您的 Web 应用程序！