uniapp 添加分包页面,配置分包预下载

为什么要分包 ?

分包即将小程序代码分成多个部分打包,可以减少小程序的加载时间,提升用户体验

添加分包页面

比较便捷的方法是使用vscode插件 uni-create-view

  1. 新建分包文件夹

    以在我的页面,添加分包的设置页面为例,新建文件夹 src\pagesMember

  2. 在分包文件夹上,添加分包页面

    回车后,即完成分包页面的添加

在 src\pages.json 中自动新增了代码

json 复制代码
  "subPackages": [
    {
      "root": "pagesMember",
      "pages": [
        {
          "path": "settings/settings",
          "style": {
            "navigationBarTitleText": "设置"
          }
        }
      ]
    }
  ],

为什么要配置分包预下载 ?

分包预下载配置可以指定在用户打开指定页面时,预下载指定的分包,可提升进入分包页面的速度,提升用户体验

配置分包预下载

src\pages.json

js 复制代码
  // 配置分包预下载
  "preloadRule": {
    "pages/my/my": {
      "network": "all",
      "packages": ["pagesMember"]
    }
  }

含义为:在打开页面 pages/my/my 时,所有网络下都预下载分包 pagesMember

相关推荐
xingyuzhisuan5 小时前
网络 Token 常见故障原理,基础排查科普
运维·服务器·网络·php
巴博尔5 小时前
UNIAPP中NVUE页面 动画
android·前端·javascript·ios·uni-app
z落落6 小时前
C#String字符串
开发语言·c#·php
fiveym13 小时前
Debian 12 PXE 安装报错:Bad archive mirror 复合型故障排查全记录
运维·服务器·debian·php
STDD14 小时前
strace 和 perf:Linux 进程调试和性能分析深度指南
linux·运维·php
上海合宙LuatOS15 小时前
Air8000低功耗指南
开发语言·物联网·php·lua
ch_ziyuan15 小时前
2026新优化神马TV8.5影视点播系统保姆级搭建教程:三后台配置+反编译修改
android·ios·php
難釋懷16 小时前
Nginx高可用配置
linux·nginx·php
边界条件╝17 小时前
uniapp 深度使用
uni-app
路光.18 小时前
uniapp小程序/App使用webview打通麦克风权限实现录音功能
小程序·uni-app·app