角度延迟加载是否会减小bundle大小



我是angular的新手。我想了解更多关于懒惰加载的信息。根据定义,懒惰加载模块可以帮助我们减少启动时间。所以我的问题是,假设我的应用程序有50个组件。在生产环境中构建它之后,它生成了900 KB的vendor.js。如果我懒惰地加载其中的10个组件,它们会生成100kb的区块文件"1.chunk.js"。

那么,在这种情况下,我的vendor.js捆绑包大小会从900 KB减少到800 KB吗?如果不是,懒惰加载模块如何帮助我们减少启动时间?

否,Angular的延迟加载功能并没有减少捆绑包的大小,它只加载捆绑包的一小部分(按需(,也就是chunk-而不是完全加载。因此,对于您的情况,捆绑包大小不会从900 KB减少(如果您累积块的大小,因为在实现延迟加载后,将有几个块要加载(,但也不会同时加载900 KB

顾名思义,Lazy Loading只在请求(即延迟(时加载某些内容

也就是说,如果您在应用程序中实现了延迟加载,则应用程序将仅加载加载应用程序所需的相关模块。

因此,从本质上讲,它并没有加载应用程序最初并不需要的模块。

这就是它如何帮助加快应用程序的加载时间。

懒惰加载的基本作用是将组件分解为模块。因此,在路由中,您只需要配置主路由并将模块加载为子路由。

这将你的100个组件分成10个模块,每个模块有10个组件所以每一个都有单独的

module-ngfactory.js

文件。因此,如果你将这100个文件包含在一个模块中(不是懒惰加载(,你将有一个模块-ngfactory.js文件,它比这个大。

并且该装载是按需的并且仅在被请求时进行。所以装载速度很快。

加速Angular加载的最佳方法是引入AOT构建。当你使用

ng-s 

这将转换代码,并让您知道转换的状态。但包括ts文件在内的所有数据都将被发送到浏览器进行调试。所以ts到js的转换发生在浏览器中。这很慢。

通过使用

ng-s --aot 

AOT-提前编译将生成js文件并发送到浏览器。因此不存在浏览器端的反编译。这比使用JIT 非常非常快

因为加载的初始块大小非常小,所以与所有模块都热切加载的大捆绑包大小相比,它将快速加载。

最新更新