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前端神器4 小时前
vue、uniapp项目循环中能显示每个列表的内容,但是点击的时候传递的参数却不正确
uni-app
ModyQyW4 小时前
HBuilderX 4.87 无法正常读取 macOS 环境配置的解决方案
前端·uni-app
脾气有点小暴4 小时前
Uni-app App 端自定义导航栏完整实现指南
uni-app
量子联盟5 小时前
功能完整的PHP站点导航管理系统php程序;开源免费下载
开发语言·php
_F_y9 小时前
网络层协议:IP
网络·tcp/ip·php
豌豆学姐9 小时前
Sora2 短剧视频创作中如何保持人物一致性?角色创建接口教程
android·java·aigc·php·音视频·uniapp
CDwenhuohuo10 小时前
uniapp去掉手机状态栏 全屏展示
开发语言·javascript·uni-app
豌豆学姐11 小时前
Sora2 视频生成 API 如何对接?附可直接使用的开源前端项目
前端·人工智能·开源·aigc·php
007php00711 小时前
Git 操作偏门指南:常用和隐藏命令与问题解决
java·git·面试·职场和发展·golang·jenkins·php
行走的陀螺仪13 小时前
使用uniapp,实现根据时间倒计时执行进度条变化
前端·javascript·uni-app·vue2·h5