离子 - 了解延迟加载

Question

使用 ionic 3 我终于在我的应用程序中实现了延迟加载。我有一个关于 Ionic 3/4 性能的理论问题。

假设我有 3 页：

第1页

第2页

第3页

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

另外说我有一个模态页面：

模态页面

此模态页面大小为 1.5mb。

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

我的问题是：

1. 当我加载应用程序并首先打开第 1 页，然后将第 2 页推入堆栈时。由于 ModalPage 不是全局的，并且分别为第 1 页和第 2 页导入。这是否意味着我打开 page1 时的应用程序将延迟加载并下载 1.5mb 模态页面，然后在我推送页面时再次下载另一个模态页面实例 @ 1.5mb 2 入栈？所以我总共下载了 3mb 的代码？

2. 如果上述情况属实，除了下载问题之外，对性能还有其他影响吗？即通过页面模块加载多个组件/页面实例与将组件/页面全局导入app.module

Answer 1

我有一个延迟加载的 ionic 3 应用程序（不使用 app.module），其中一个组件在多个页面中使用。我从来没有检查过加载模式，所以我启动了一个开发实例来检查。

来源标签 如果您查看开发工具中的Sources 选项卡，对于调试构建（使用源映射），您将在初始加载时看到共享组件根本没有加载。然后，一旦我点击了需要该组件的页面，它就会加载到标准的components 目录中（无论如何，在使用调试版本时）。点击同样使用此组件的第二个页面不会加载它的第二个实例或任何内容（在Sources 选项卡中）。

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

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