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

相关推荐
钟智强9 小时前
我警告了 329 天
git·php·wordpress·webshell
千逐6811 小时前
Uniapp 鸿蒙实战之 AtomGit APP - 仓库详情与文件树浏览
服务器·microsoft·uni-app
万物得其道者成12 小时前
uni-app App 热更新实现指南:从接口检查到下载安装重启(附带AI提示词)
uni-app
从零开始的代码生活_12 小时前
Linux 五种 IO 模型详解
linux·服务器·数据库·c++·后端·php
anyup13 小时前
uView Pro 正式支持 MCP 协议!让 AI 秒懂你的组件库
前端·uni-app·ai编程
千逐6815 小时前
Uniapp 鸿蒙实战之 AtomGit APP - 首页设计与仓库列表实现
华为·uni-app·harmonyos
AC赳赳老秦1 天前
防火墙规则批量配置实战:OpenClaw 自动生成模板、批量下发与合规性校验全解析
java·开发语言·人工智能·python·github·php·openclaw
2502_921286071 天前
【企业网络管理】DHCP 与 SAMBA:从协议原理到企业级实战配置全解析
开发语言·php
运维管理1 天前
H3C SecPath W2000-G[AK]系列Web应用防火墙 典型配置举例(E6711 E6712 E6713)-6W108-H3C 官方配置
服务器·网络·php