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

相关推荐
ooseabiscuit8 小时前
Laravel4.x:现代PHP框架的奠基之作
java·开发语言·php
ooseabiscuit11 小时前
Laravel 1.x:揭秘PHP框架的起源与设计
php·laravel
m0_7381207211 小时前
ctfshow靶场SSRF部分——基础绕过到协议攻击解题思路与技巧(一)
服务器·前端·网络·安全·php
2501_9159090614 小时前
全面解析前端开发中常用的浏览器调试工具及其使用场景
android·ios·小程序·https·uni-app·iphone·webview
幽络源小助理14 小时前
最新短网址系统源码 分用户链接 - 幽络源免费源码分享
前端·php
wuxianda103014 小时前
uniapp项目上架苹果商店4.3a被拒,3天极速解决方案2026.5.8
前端·人工智能·flutter·uni-app·ios上架·苹果上架·苹果4.3a
ooseabiscuit14 小时前
Laravel5
android·php·laravel
神仙别闹18 小时前
基于PHP+MySQL实现在线考试系统
开发语言·mysql·php
棒棒的唐20 小时前
配置 VSCode 的 PHP Intelephense 插件,去掉因php版本不同导至的红色波浪线误判
ide·vscode·php
小盼江20 小时前
Uniapp小程序鲜花商城推荐系统 买家卖家双端(web+uniapp)
前端·小程序·uni-app