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

相关推荐
Web打印1 小时前
Phpask(php集成环境)之01安装Apache
开发语言·php·apache
未来之窗软件服务1 小时前
服务器运维(三十八)日服务器php日志分析工具—东方仙盟
运维·服务器·php·服务器运维·仙盟创梦ide·东方仙盟
生命因何探索1 小时前
Redis—主从复制+哨兵
数据库·redis·php
g***27991 小时前
IPV6公网暴露下的OPENWRT防火墙安全设置(只允许访问局域网中指定服务器指定端口其余拒绝)
服务器·安全·php
Web打印2 小时前
Phpask(php集成环境)之04配置网站
开发语言·前端·php
Web打印2 小时前
Phpask(php集成环境)之09 统一管理网站和监听端口
开发语言·php
Web打印2 小时前
Phpask(php集成环境)之05配置tp5网站
开发语言·php
筱白爱学习15 小时前
RestHighLevelClient详细使用手册
linux·服务器·php
予你@。16 小时前
UniApp + Vue3 实现 Tab 点击滚动定位(微信小程序)
微信小程序·小程序·uni-app
liann11917 小时前
4.3.2_WEB——WEB后端语言——PHP
开发语言·前端·网络·安全·web安全·网络安全·php