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

相关推荐
牛马也想出海8 小时前
亚马逊爬虫代理IP:IP类型选择与配置指南
开发语言·php
梦梦代码精10 小时前
基于UniApp+Vue3+ThinkPHP 8,这套知识付费系统的架构设计有点东西
java·低代码·docker·uni-app·开源·php
lxw184491251413 小时前
PHP5、PHP7、PHP8 版本核心区别与特性
人工智能·php
AI直播技术杂谈13 小时前
直播画面突然模糊了,排查了三个小时
开发语言·php
heimeiyingwang13 小时前
【架构实战】可观测性三支柱实战:Metrics、Logging、Tracing 如何统一落地
开发语言·架构·php
风月说与山鬼13 小时前
三、uni-app页面配置(pages.json)
前端·uni-app
CRMEB16 小时前
商城大促活动策划全流程:从定目标到复盘四阶段
java·开发语言·人工智能·ai·开源·php
新鲜势力呀18 小时前
ESP8266 物联网实战:PHP 后端 + Web 服务器实现 LED 远程控制(超详细入门教程)
前端·物联网·php
xixiaoyunya18 小时前
从零搭建跨域互联网络:个人与小团队的轻量组网方案技术解析
开发语言·智能路由器·php
风月说与山鬼18 小时前
二、uni-app入口文件(main.js)
javascript·uni-app