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

相关推荐
CaliXz2 小时前
iOS图标边缘效果问题及解决方法
php·composer
炸炸鱼.3 小时前
Zabbix企业级高级应用:从自动化监控到自定义告警完全指南
开发语言·php
niech_cn3 小时前
uniapp开发App(iOS、Android、鸿蒙Next)之新建项目相关细节(二)
uni-app
梦梦代码精4 小时前
功能堆砌不如好扩展:4 款开源商城系统的选型思考
java·docker·uni-app·开源·php
狗凯之家源码网4 小时前
网盘源码/私人云存储网盘系统/基于Laravel+vue开发/快速安装/完整的文档
开源·php
巴巴博一4 小时前
uni-app / 微信小程序中 open-type=“share“ 按钮样式异常,和普通 view 无法齐平的解决方案
微信小程序·uni-app·notepad++
狗凯之家源码网4 小时前
祈福导航系统 V1.1 源码_毛玻璃 UI PHP 网址导航源码带后台
php
2501_912784086 小时前
跨境电商独立站的多语言架构设计:基于 Laravel + Vue.js 的实践
vue.js·php·laravel·跨境电商·taocarts
游九尘16 小时前
JavaScript 实现三段式版本号对比函数(app升级用)
javascript·uni-app
2501_9160074717 小时前
前端开发常用软件与工具全面指南
android·ios·小程序·https·uni-app·iphone·webview