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

相关推荐
XR1234567884 小时前
工厂车间无线网络方案对比:AGV漫游哪家强?
开发语言·php
現実君5 小时前
【硬件进阶】AD22上位替换JLEDA教程
开发语言·php
波罗丁牌11 小时前
uni-app 实现视频聊天、屏幕分享,支持Android、HarmonyOS、iOS
android·uni-app·音视频
宁小法11 小时前
php - request_terminate_timeout解释
php·php-fpm·进程终止·请求终止超时
前端l13 小时前
uni‑app(Vue3+setup)开发微信小程序高频坑汇总
微信·uni-app
郝亚军15 小时前
FE1.1S-BQFN24BT可以指定IP端口吗?
开发语言·php
pan30350747916 小时前
uniapp 不用发版也可以做到版本更新
uni-app
WA内核拾荒者16 小时前
WhatsApp 富媒体消息(图片/视频)的发送优化与压缩策略
php·音视频·媒体
WA内核拾荒者17 小时前
WhatsApp 多语言 AI 对话的语言模型选择与本地化适配
人工智能·语言模型·php
00后程序员张17 小时前
使用Instruments工具深入分析iOS应用性能与启动时间优化
android·macos·ios·小程序·uni-app·cocoa·iphone