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
非常非常快
因为加载的初始块大小非常小,与所有模块都急切加载的大包大小相比,它会加载得更快。
我是 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
非常非常快因为加载的初始块大小非常小,与所有模块都急切加载的大包大小相比,它会加载得更快。