延迟加载以获得更好的Angular性能

在我们继续关于独立组件的系列文章之前,有必要先讨论一下创建高性能Angular应用的最重要工具:延迟加载

当我们使用惰性加载时,我们不是将我们的应用程序构建为一个单独的代码包,当用户在浏览器中访问应用程序时就会下载,而是将我们的代码分成几个不同的部分,然后下载在需要时按需提供

例如,在没有延迟加载的情况下,如果我们的应用程序Javascript代码有25mb大,那么浏览器必须下载、解析和运行这25mb的代码,这可能会大大降低移动设备或internet连接的速度。

相反,我们可以将应用程序划分为不同的模块包含组件、管道、指令和服务。在我们的例子中,让我们假设创建一个AdminModule其中包括应用程序Admin部分所需的所有功能。如果这个模块最终包含10mb的代码,并且我们对它使用惰性加载,那么应用程序的初始包将从25mb下降到15mb,这是一个很大的差异。

只有管理员用户必须下载管理部分的10mb代码,这对性能和安全性都很好(黑客无法对从未在他们的浏览器中下载过的代码进行逆向工程)。

惰性加载最好的部分是在我们的路由器配置中使用一行代码启动它:

上面的代码行会让Angular编译器自动创建一个代码包AdminModule并启用延迟加载该代码时/项目访问。就是这样!

betway必威滚球

Alain是谷歌开发专家,擅长Web技术、Angular和谷歌地图。他的日常任务是帮助开发团队采用Angular,并使用该框架进行大规模构建。他在六大洲都教授过Angular !阿兰是一名世界旅行家和摄影师,也是国际会议的演讲者,并出版了几门视频课程。