uniapp小程序 subPackages分包加载配置

这篇具有很好参考价值的文章主要介绍了uniapp小程序 subPackages分包加载配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用场景:uniapp开发各种小程序时候遇到主包过大,无法上传的情况

uniapp的分包机制: 参照官网uniapp subPackages使用

小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。所以分包后的页面是在打开分包内的某个页面以后才会加载分包的内容

每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。

在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示

目前小程序分包大小有以下限制:

整个小程序所有分包大小不超过 20M

单个分包/主包大小不能超过 2M

对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。

分包下支持独立的 static 目录,用来对静态资源进行分包。

1.首先,在uniapp结构里原本已经有一个pages的包(文件夹)了,这时候在pages同级里新建一个subpkg包 并新建页面

2.配置pages.json

在pages.json中新建数组"subPackages",数组中包含两个参数:1.root:为子包的根目录,2.pages:子包由哪些页面组成,参数同pages;

注意:主包和分包是不能再同一目录下,在构建uniapp项目时,可以考虑一下目录结构,以便后期进行分包;

subpackages uniapp,uni-app,小程序,Powered by 金山文档

3.分包预载配置(preloadRule)

做这一步主要为了优化速度,不想优化速度的可以跳过这个配置

配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度

preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:

字段 类型 必填 默认值 说明

packages StringArray 是 无 进入页面后预下载分包的 root 或 name。APP 表示主包。

network String 否 wifi 在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)

app的分包,同样支持preloadRule,但网络规则无效。文章来源地址https://www.toymoban.com/news/detail-725749.html

到了这里,关于uniapp小程序 subPackages分包加载配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 微信小程序(十四)分包和分包预加载

    微信小程序(十四)分包和分包预加载

    注释很详细,直接上代码 上一篇 新增内容: 1.分包的配置 2.分包预加载的写法 先说说为什么需要分包: 小程序追求小而快,主包的大小控制是 小程序上线的硬性要求 ,分包有利于小程序 优化加载速度 分包的注意事项: 单个分包大小不能超过2mb 分包不意味着可以无限增加

    2024年01月25日
    浏览(11)
  • 小程序--分包加载

    小程序--分包加载

    分包加载是优化小程序加载速度的一种手段。         小程序限制单个包体积不超过2M;         分包可以优化小程序页面的加载速度。           subPackages :下载app.json文件中           root :分包所在的目录           pages :分包包含的页面         注意: tabBar页

    2024年02月22日
    浏览(8)
  • 小程序如何进行分包加载

    1.准备工作 : 在开始分包加载之前,确保你已经阅读了微信官方的开发文档,熟悉小程序的基本结构和开发流程。 2.配置分包信息 : 在小程序的 app.json 文件中,使用 subpackages 字段配置分包信息 我们定义了两个分包: subpackage1 和 subpackage2 ,每个分包包含一个页面。 3.创建

    2024年02月06日
    浏览(7)
  • uni-app 小程序主包、分包优化方案

    uni-app 小程序主包、分包优化方案

    先看效果 图1  图2是点图1的那个蓝色的字 代码依赖分析看的 好,如果博主这2两张图是你要的效果,来,说说具体操作方案 一、manifest.json加代码,如下,官方的文旦地址点右边---》uni-app官网 二、 目录结构 1、新建一个pageCity(你自己命名) 2、移动你原本的子页面文件(非

    2024年02月15日
    浏览(12)
  • uni-app做微信小程序的分包处理

    uni-app做微信小程序的分包处理

    我们的都知道微信小程序有随即随用,用完即走的优点,并且它开发门槛低,但是它也有一个致命的缺点,就是代码包体积的限制,这一缺点让小程序的开发有了一定的限制,现在有一方法可以减少代码包的体积,能够让小程序的功能得到一定的扩展,这一方法就是——分包

    2023年04月08日
    浏览(47)
  • uniapp写小程序 小程序分包处理

    uniapp写小程序 小程序分包处理

    这是分包小程序之后的目录结构 分包步骤如下 1、在根目录下新建一个 subPackages 文件夹, 之后在 subPackages 文件夹下创建 pages 用来存放页面文件 主包和分包是不能再同一目录下 根目录下的pages,我只放了 tabbar切换的两个页面,其余的页面都在subPackagespages 下面 subPackagespage

    2024年02月15日
    浏览(11)
  • uniapp分包,小程序分包处理 ,小程序发布包体积过大解决方案

    uniapp分包,小程序分包处理 ,小程序发布包体积过大解决方案

    分包就是把一个完整的小程序项目,按照需求划分为不同的子包,构建的时候打包城不同的分包,按需加载 1、 可以减少小程序首次启动的下载时间 2、 可以多人开发中更好的解耦协作 3、 小程序发布主包体积过大 1、 整个小程序,主包加分包不能超过20M,单个包不能超过2M,主包也

    2024年02月04日
    浏览(9)
  • uniapp微信小程序之分包异步化之组件分包

    日渐增加的通用组件造成的主包空间不足; 提升小程序访问速度,降低白屏率; 如何进行占位组件配置; 如何解决通过$refs访问异步组件报错; 如何判断所有异步组件都已加载完毕; 多分包组件之间互相调用如何配置; 占位组件配置         直接在页面路由配置文件

    2024年02月07日
    浏览(11)
  • uniapp 微信小程序分包

    uniapp 微信小程序分包

    uniapp项目编译到微信小程序上传代码时提示体积过大,这个时候就要做优化了,大致就以下几个方面 1.减少或压缩本地图片 2.删减重复代码,删减无用CSS样式 3.减少无用组件引用 这个时候做完发现也优化不了多少体积,代码包还是过大,所以就要用到分包了 分包步骤 1.在p

    2024年02月14日
    浏览(15)
  • uniapp 微信小程序 分包

    uniapp 微信小程序 分包

    1、manifest.json内添加如图所示: 2、在与pages同级上创建各个分包的文件夹 把需要分包的文件对应移入分包文件夹内 3、page.json内修改分包文件的路径 比如: 3、页面内跳转路径修改 比如:

    2024年02月13日
    浏览(15)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包