Angular 17优化指南：使用@defer减少初始加载体积

随着Angular 17的发布，优化应用程序的性能和加载时间变得比以往任何时候都更加重要。本文将探讨如何通过使用@defer来减少Angular 17应用的初始加载体积，帮助开发者构建更高效的应用。

背景介绍

在构建大型Angular应用时，如何管理模块的加载是个关键问题。特别是当使用诸如Angular Material等第三方库时，如何避免这些库在应用初始化时全部加载是个挑战。我们来看一个实际案例：

案例背景

开发者Woden使用Angular 17和Nx构建了一个应用，但发现即使配置了懒加载路由，Angular Material的某些模块如form-field、CDK和list等仍然在初始加载包中。这导致了应用程序的首次加载时间较长。

初始尝试

Woden通过源代码映射工具（source map explorer）发现了问题所在，并尝试了懒加载路由配置：

export const APP_ROUTES