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

相关推荐
霸王大陆44 分钟前
《零基础学PHP:从入门到实战》教程-模块七:MySQL 数据库基础-2
数据库·mysql·php
霸王大陆1 小时前
《零基础学PHP:从入门到实战》教程-模块七:MySQL 数据库基础-1
数据库·mysql·php
移远通信1 小时前
配网-复杂场景
服务器·开发语言·php
刻刻帝的海角2 小时前
基于UniApp与Vue3语法糖的实时任务管理应用开发实践
uni-app
能不能送我一朵小红花3 小时前
基于uniapp的PDA手持设备红外扫码方案
前端·uni-app
chaffererdog3 小时前
uniapp开发微信小程序使用vk-uview-ui的uSearch搜索组件,在微信开发者工具中点击输入框会意外触发custom事件
微信小程序·小程序·uni-app
脾气有点小暴4 小时前
uniapp通用递进式步骤组件
前端·javascript·vue.js·uni-app·uniapp
半生过往5 小时前
前端运行PHP 快速上手 使用 PHPStudy Pro 详细搭建与使用指南
开发语言·前端·php
Xudde.7 小时前
friendly靶机渗透
笔记·学习·安全·web安全·php
草字7 小时前
uniapp 滚动到表单的某个位置,表单验证失败时。
前端·javascript·uni-app