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

相关推荐
anyup15 小时前
分享 5 套 uni-app 实用主题,一键适配暗黑模式
前端·uni-app·视觉设计
gg1593572846018 小时前
Uni-app跨平台开发全解课程:从零基础到企业级多端落地实战
vue.js·uni-app
凡人叶枫19 小时前
Effective C++ 条款31:将文件间的编译依存关系降至最低
linux·开发语言·c++·php·嵌入式开发·effective c++
狗凯之家源码网19 小时前
正版扭蛋机 V3 商用程序,盲盒系统落地实战指南
开源·php
程序猿阿伟20 小时前
《Chrome非必要服务的精细化关闭指南》
前端·chrome·php
皮皮蟹虾饺21 小时前
tcpdump指南:从基础抓包到 BPF 高级过滤与生产实战
测试工具·php·tcpdump
it-10241 天前
抖音快手短视频去水印微信小程序/一键去水印/小程序去水印接口代码
微信小程序·小程序·php
宋拾壹1 天前
php对接抖音验券,二维码验券
php·抖音·二维码·验券
我是唐青枫2 天前
Php Doctrine ORM 实战详解:从实体映射到查询、关联与事务
php
juesdo2 天前
array_search()函数的用法
web安全·php