当前位置：首页 > article >正文

uniapp 预加载分包，减少loading

article 2025/1/14 14:55:45

在 uniapp 中，可以通过配置 pages.json 文件中的 preloadRule 属性来实现页面预加载功能。以下是具体操作步骤：

1. 在 `pages.json` 中配置 `preloadRule`

preloadRule 用于指定哪些页面需要预加载，以及预加载时机。下面是一个示例配置：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/pagesa/index",
      "style": {
        "navigationBarTitleText": "页面A"
      }
    },
    {
      "path": "pages/pagesb/index",
      "style": {
        "navigationBarTitleText": "页面B"
      }
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all", 
      "packages": ["pagesa", "pagesb"]
    }
  }
}

2. 配置参数说明

path: 需要设置预加载的页面路径，比如这里设置了首页 pages/index/index。
network: 预加载的网络环境：
- all: 不限制网络环境，任何环境下都会预加载。
- wifi: 仅在 Wi-Fi 环境下预加载。
packages: 需要预加载的页面列表（对应路径的 path，不包含 pages/ 前缀）。

3. 如何生效

当用户访问 pages/index/index 时，指定的 pages/pagesa/index 和 pages/pagesb/index 会被提前加载到内存中，从而实现预加载。

4. 注意事项

性能优化: 预加载会占用更多的内存，建议仅在确有必要时使用，避免对性能造成过大影响。
按需加载: 如果某些页面的预加载依赖特定条件，可以通过条件判断动态导航页面来实现类似效果。

如果需要更复杂的预加载逻辑，也可以通过 uni.preloadPage 动态控制页面加载：

uni.preloadPage({
  url: '/pages/pagesa/index'
});

uni.preloadPage({
  url: '/pages/pagesb/index'
});

1. 预加载整个包还是单个页面？

在 uniapp 中，当配置了 preloadRule 并预加载一个页面包（如 pagesa 包）时：

结果: 会将该页面包内所有页面预加载到内存中，而不仅仅是某一个页面。
工作原理: preloadRule 针对的 packages 是一个页面包，页面包中的所有页面会被提前加载，但页面初始化逻辑（如生命周期函数）只有在实际访问时才会执行。

2. 进入其他页面后是否还会有加载转圈效果？

如果预加载成功：

转圈效果是否出现: 页面已经预加载到内存，用户首次进入这些页面时，通常不会出现加载转圈效果，因为资源已经提前加载完毕。页面显示会更快。
体验优化: 由于预加载提前完成了页面资源的加载，用户在导航到目标页面时体验接近于即时切换。

如果预加载失败（比如网络不佳或某些资源过大）：

首次进入未完全预加载的页面时，可能仍会有加载动画或转圈效果，视具体情况而定。

3. 影响转圈效果的因素

转圈效果主要由以下因素引起：

页面资源: 页面依赖的 JS、CSS 等静态资源是否已加载。如果预加载成功，这些资源已经准备好，转圈效果就不会出现。
数据请求: 如果页面在生命周期中需要加载数据（如 onLoad 或 onShow 中发起请求），即使预加载成功，仍可能出现短暂的加载延迟，具体取决于数据加载的速度。