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

相关推荐
2601_965798472 小时前
Salient Theme Setup Guide for Fast Creative WordPress Sites
数据库·web3·php·wordpress
qq_316837757 小时前
uniapp + Vite + ffmpeg-wasm 0.12.x 集成示例
ffmpeg·uni-app·wasm
游戏开发爱好者87 小时前
开心上架是什么,一站式 Apple 开发者工作台总览
android·小程序·https·uni-app·iphone·webview
年年CODE8 小时前
uni-app 实现 AI 流式问答:H5 EventSource 与微信小程序 onChunkReceived 的兼容方案
uni-app
xixiaoyunya8 小时前
中小微企业轻量组网方案的技术选型与实践:从传统专线到软定义隧道的成本与效能分析
服务器·php·apache
知行产研9 小时前
中国矿山无人驾驶出海的三重门
数据库·mysql·php
风月说与山鬼10 小时前
七、uni-app页面与组件生命周期
前端·uni-app
PedroQue9911 小时前
Vue-Router 2.4.0 新增可控重定向功能
前端·uni-app
前进的程序员12 小时前
告别Copilot?Codex本地化部署指南
开源·php·copilot·codex
weixin_BYSJ198712 小时前
springboot智慧公共交通系统---附源码51123
java·javascript·spring boot·python·django·flask·php