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

相关推荐
2501_9159184125 分钟前
苹果App Store上架审核卡住原因分析与解决方案指南
android·ios·小程序·https·uni-app·iphone·webview
三七吃山漆4 小时前
[红明谷CTF 2021]write_shell
php·ctf·[红明谷ctf 2021]
ZHOUPUYU6 小时前
PHP与WebSocket实时通信的原理到生产级应用
开发语言·html·php
困死,根本不会7 小时前
树莓派 SSH 连接排错实录:从 IP 网段到主机密钥变更,再到 VNC 自启动
开发语言·ssh·php·树莓派
天远云服9 小时前
驾培系统车辆核验实战:PHP集成天远二手车估值API实现学员车辆信息自动化管理
大数据·开发语言·自动化·php
ZHOUPUYU9 小时前
PHP异步编程实战ReactPHP到Swoole的现代方案
开发语言·php
HWL56799 小时前
uni-app的生命周期
前端·vue.js·uni-app
一颗小青松9 小时前
uniapp设置安卓 ios 自定义启动页
uni-app
仙古.梦回~9 小时前
uniapp中使用plus对象实现经典蓝牙
uni-app
lay_liu10 小时前
QoS质量配置
开发语言·智能路由器·php