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

相关推荐
小小代码狗11 分钟前
【无标题】
网络·sql·php
Wcy307651906622 分钟前
文件包含漏洞及PHP伪协议
开发语言·php
怀君24 分钟前
Uniapp——苹果IOS离线打自定义基座教程
ios·uni-app
码农客栈27 分钟前
小程序学习(十二)之命令行创建uni-app项目
学习·小程序·uni-app
运筹vivo@42 分钟前
攻防世界:Web_php_include
前端·web安全·php
jllllyuz1 小时前
ANPC三电平逆变器损耗计算的MATLAB实现
开发语言·matlab·php
w***76551 小时前
PHP vs Python:如何选择?
开发语言·python·php
雪芽蓝域zzs1 小时前
uniapp Vue3 项目中设置 “custom“: true 自定义底部导航栏失败
uni-app
00后程序员张1 小时前
iOS 应用加固软件怎么选,从源码到IPA方案选择
android·ios·小程序·https·uni-app·iphone·webview
imHere·1 小时前
UniApp + 微信小程序 xr-frame 3D 开发实战指南
微信小程序·uni-app·xr