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

相关推荐
每天都想着怎么摸鱼的前端菜鸟40 分钟前
【uniapp】uni.chooseImage在Android 13以下机型第一次调用授权后无权限问题
javascript·uni-app
AI风老师2 小时前
通信网络基础概念
开发语言·网络·php
链上Sniper5 小时前
区块链架构深度解析:从 Genesis Block 到 Layer 2
开发语言·网络·架构·区块链·php
hymuuuu6 小时前
【源码】研学报名小程序开发功能分析案例
mysql·php·需求分析
满分观测网友z7 小时前
uni-app 滚动视图scroll-view从入门到精通
uni-app
小妖6667 小时前
uni-app bitmap.load() 返回 code=-100
前端·javascript·uni-app
走,带你去玩7 小时前
uniapp 时钟
javascript·css·uni-app
耶啵奶膘7 小时前
uniapp——input 禁止输入 ,但是可以点击(禁用、可点击)
uni-app
前端与小赵7 小时前
uni-app隐藏返回按钮
前端·uni-app
亿坊电商7 小时前
PHP框架在内容管理系统开发中的优势:效率、安全与扩展性!
开发语言·安全·php