离子-了解延迟加载

Question

使用ionic 3，我终于在我的应用程序中实现了延迟加载。我对离子3/4的性能存在理论上的疑问。

假设我有3页：

第1页

第2页

第3页

所有这些都是延迟加载的。

另外说我有一个名为以下内​​容的模式页面：

ModalPage

此模式页面的大小为1.5mb。

假设在第1页和第2页中使用ModalPage，并在每个页面的相应module.ts中包含此内容（不在app.module中）。

我的问题是：

1. 加载应用程序时，我先打开page1，然后将page 2推入堆栈。由于ModalPage不是全局的，因此不会分别导入页面1和页面2。这是否意味着我的应用程序在打开page1时会先延迟加载并下载1.5mb的Modal页面，然后再在推送页面时再次加载模式页面@ 1.5mb 2进入堆栈？所以总共我要下载价值3mb的代码？

2. 除了下载问题以外，如果上述情况正确，那么对性能还有其他影响吗？也就是说，通过页面模块加载了多个组件/页面实例，而不是将组件/页面全局导入到app.module

Answer 1

我有一个ionic 3应用程序，它可以延迟加载（不使用app.module），并且该组件在多个页面中使用。我从未检查过加载模式，因此我启动了一个dev实例进行检查。

“来源”标签 如果查看开发工具中的Sources标签，则对于调试版本（带有源映射），您将在初始加载时看到共享组件完全未加载。然后，一旦我找到了需要该组件的页面，它就会加载到标准components目录中（无论如何使用调试版本）。点击另一个也使用此组件的页面不会加载该组件或其他任何实例的实例（在Sources标签中）。

网络标签 如果您执行相同的活动，但查看Network标签，则不太清楚。一旦您点击了使用共享组件的第一页，就我而言，文件11.js就被请求了。查看该文件，它显然具有共享组件的打字稿。然后，我进入了使用此组件的第二页，并且（在我的情况下）18.js已下载，并且其中也包含共享组件的打字稿。

基于此，我的印象是调试版本会多次下载共享组件的打字稿（每页需要一次）。不知道产品构建或任何其他因素是否会改变结果。