在我们继续关于独立组件的系列文章之前,有必要先讨论一下创建高性能Angular应用的最重要工具:延迟加载.
当我们使用惰性加载时,我们不是将我们的应用程序构建为一个单独的代码包,当用户在浏览器中访问应用程序时就会下载,而是将我们的代码分成几个不同的部分,然后下载在需要时按需提供.
例如,在没有延迟加载的情况下,如果我们的应用程序Javascript代码有25mb大,那么浏览器必须下载、解析和运行这25mb的代码,这可能会大大降低移动设备或internet连接的速度。
相反,我们可以将应用程序划分为不同的模块包含组件、管道、指令和服务。在我们的例子中,让我们假设创建一个AdminModule
其中包括应用程序Admin部分所需的所有功能。如果这个模块最终包含10mb的代码,并且我们对它使用惰性加载,那么应用程序的初始包将从25mb下降到15mb,这是一个很大的差异。
只有管理员用户必须下载管理部分的10mb代码,这对性能和安全性都很好(黑客无法对从未在他们的浏览器中下载过的代码进行逆向工程)。
惰性加载最好的部分是在我们的路由器配置中使用一行代码启动它:

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