Angular 延迟加载是否会减小包的大小?

Does Angular lazy-loading reduce the bundle size?

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

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

不,Angular 的延迟加载功能不会减小包的大小,它只会加载包的一小部分(按需)-AKA chunk- 相反完全加载它。所以对于你的情况,bundle size 不会从 900 KB 减少 (如果你累积块的大小,因为在实现延迟加载之后,会有几个要加载的块),但也不会立即加载 900 KB

顾名思义,延迟加载仅在请求时加载(即延迟)

话虽这么说,如果您的应用程序实现了延迟加载,则该应用程序将只加载加载您的应用程序所需的相关模块。

所以本质上它并没有加载应用程序最初不需要加载的模块。

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

延迟加载基本上就是将您的组件分解为模块。所以在路由中你只需要配置主路由和加载模块作为子路由。

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

module-ngfactory.js

个文件。所以如果你将这 100 个文件包含在一个模块中(不是延迟加载)你将有一个模块-ngfactory.js 文件 比那个大。

并且此加载是按需加载的,并且仅在请求时加载。所以加载速度很快。

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

ng-s 

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

通过使用

ng-s --aot 

AOT - 提前编译将生成 js 文件并发送到浏览器。所以没有浏览器端的转译。这比使用 JIT

非常非常快

因为加载的初始块大小非常小,与所有模块都急切加载的大包大小相比,它会加载得更快。