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

相关推荐
steem_ding1 小时前
net.core 调优指南
开发语言·php
酒醉的胡铁1 小时前
uniapp运行到鸿蒙证书配置
服务器·uni-app·harmonyos
hteng2 小时前
逮住那个幽灵:Laravel+Supervisor后台任务高并发下 PDO Error 2014 的排查实录
php·laravel
zcfeng5303 小时前
PHP升级
开发语言·php
华玥作者3 小时前
uni-app + Vite 项目中使用 @uni-helper/vite-plugin-uni-pages 实现自动路由配置(超详细)
前端·uni-app·vue·vue3·vite
狼性书生3 小时前
uniapp+vue3实现的简单吐司通知弹窗组件
前端·uni-app·vue·组件·插件
Front思5 小时前
uniapp解决点击穿透问题总结
uni-app
无情的8865 小时前
S11参数与反射系数的关系
开发语言·php·硬件工程
peachSoda76 小时前
uniapp开发小程序 使用scroll-view时左右滑动切换无法回到最左边的bug解决方案
小程序·uni-app
ChinaLzw6 小时前
解决uniapp web-view 跳转到mui开发的h5项目 返回被拦截报错的问题
前端·javascript·uni-app