Angular 社区需要一种直观的内置方法来延迟加载组件、指令和管道。在 Angular v17 中，我们创建了Deferrable Views ，这是一项新功能，可以使延迟加载依赖项的过程变得更加直观。我们使用相同的“@-syntax”构建了可延迟视图功能以及新的控制流语法。我们的目标是在组件模板中使用这种新语法时使其符合人体工程学且熟悉。

可延迟视图允许您以声明方式延迟加载模板的部分，直到稍后需要它们，从而帮助您优化初始包大小并改进应用程序的初始加载。例如，您可能需要延迟加载折叠下方的大型组件，并希望它在进入视口后立即加载。或者您可能想加载基于单击交互的组件。这两种情况以及更多情况都可以在 v17 中使用可延迟视图的模板中本地实现。这意味着组件代码将位于一个单独的包中，该包会在您的应用程序方便时加载。

延迟加载的路由仍然像以前一样工作。路由级别的延迟加载提供了一种在每个路由的基础上分解应用程序块的好方法。您可以将延迟加载的路由与可延迟视图结合起来，以最大限度地优化应用程序的块。这是优化应用程序的最佳途径。

亮点

我们很高兴可延迟视图提供了一种声明式体验，允许开发人员在模板中表达他们的明确意图。无需管理详细的动态导入、使用交叉观察器或添加事件处理程序。可延迟视图完全内置并为您管理。我们创建了一组集成触发器，它们可以单独使用、一起使用或与自定义条件结合使用，以准确指定您希望延迟加载发生的方式和时间。这是一个例子：

<blog-post-cmp />
@defer (on viewport) {
  <comments />
} @placeholder {
  <img src=”placeholder.png” alt=”placeholder” />
}

此示例还使用内置占位符块来自定义延迟加载发生之前显示的内容。还有一个加载和错误块可以进一步自定义显示的内容，从而灵活地为您的应用程序提供最佳的用户体验。

预取（Prefetching）

可延迟视图提供的不仅仅是延迟加载。它还具有对预取的本机支持，因此资源的可用速度比单独延迟加载要快。预取支持所有相同的触发器和自定义条件，并使您能够完全自定义应用程序延迟加载体验。考虑以下示例：

<blog-post-cmp />
@defer (on viewport; prefetch on idle) {
  <comments />
} @placeholder {
  <img src=”placeholder.png” alt=”placeholder” />
}

评论组件将在进入视口时立即渲染，而不是等待先获取。那不是很棒吗？我们认为是这样。

更少的样板文件（Less Boilerplate）

使用可延迟视图时，您不必担心管理依赖关系。所有依赖管理工作都发生在幕后。您所要做的就是编写 @defer 块并像平常在该块中一样使用组件。 Angular 会自动提取底层的依赖关系并为您创建动态导入。这意味着需要编写更少的样板来使应用程序中的延迟加载工作。

展望未来（Looking to the future）

可推迟的观点是我们赖以发展的坚实基础。我们首先要探索的事情之一是如何教导 defer 块等待组件异步初始化。社区对如何使可延迟视图与数据获取故事更加集成表示了兴趣。具体来说，一旦数据完成获取，就会触发延迟块。我们目前正在获取有关此问题最佳解决方案的更多数据。除此之外，可推迟的视图是渐进补水的重要组成部分。

Deferables 视图目前处于开发者预览版。随着开发人员采用这一新功能，我们将收集反馈并不断改进它，并计划在未来版本中退出开发人员预览版。

如果您想了解更多信息，请查看angular.dev 上的可延迟视图指南，并访问教程以直接在浏览器中学习。

Angular 团队的 Andrew Kushnir 是这篇博文的共同作者。

原文链接：https://blog.angular.dev/use-angulars-new-deferrable-views-now-20ca9f64f1e5