【微信小程序】-- 分包(四十四)

news2025/1/22 13:04:09

请添加图片描述

  • 💌 所属专栏:【微信小程序开发教程】

  • 😀 作  者:我是夜阑的狗🐶

  • 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!

  • 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘

文章目录

  • 前言
  • 一、分包 - 基础概念
      • 1、什么是分包
      • 2、分包的好处
      • 3、 分包前项目的构成
      • 4、 分包后项目的构成
      • 5、分包的加载规则
      • 6、分包的体积限制
  • 二、分包 - 使用分包
      • 1、配置方法
      • 2、打包原则
      • 3、引用原则
  • 总结


前言

  大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第44篇文章;
  今天开始学习微信小程序的第25天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。
  专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。


一、分包 - 基础概念

  前面已经介绍了 全局数据共享,通过栗子学习了 MobX 安装和使用,分别能够将全局数据对象在页面和组件上进行引用。接下来就来学习一下小程序中另外一个概念-分包。话不多说,让我们原文再续,书接上回吧。

请添加图片描述

1、什么是分包

  分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用
时按需进行加载。

2、分包的好处

  对小程序进行分包的好处主要有以下两点:

  • 分包之后,可以先加载主包,也就是主页面,这样的话就能优化小程序首次启动的下载时间。
  • 在多团队共同开发时,可以按照功能的不同分为不同的子包,从而分配给不同的人,开发效率更高效,更具有更好的解耦协作。

3、 分包前项目的构成

  分包前,小程序项目中所有的页面和资源都被打包到了一起,导致整个项目体积过大,影响小程序首次启动的下载时间。可以来看一下小程序的构成,如图所示:

请添加图片描述

4、 分包后项目的构成

  分包后,小程序项目由 1 个主包 + 多个分包组成:

  • 主包:一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源,注意:这些公共资源可以被所有分包访问到
  • 分包:只包含和当前分包有关的页面和私有资源(分包里的私有资源只能被当前分包访问,不能被其他包访问)。

请添加图片描述

5、分包的加载规则

  • 在小程序启动时,默认会下载主包并启动主包内页面
    • tabBar 页面需要放到主包中
  • 当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示
    • 非 tabBar 页面可以按照功能的不同,划分为不同的分包之后,进行按需下载,从而来优化小程序的启动时间

6、分包的体积限制

  目前,小程序分包的大小有以下两个限制,在实际开发中都必须要遵守:

  • 整个小程序所有分包大小不超过 16M(主包 + 所有分包)。
  • 单个分包/主包大小不能超过 2M。

二、分包 - 使用分包

  在使用分包之前,先来了解一下配置方法。

1、配置方法

  先了解一下小程序的目录结构,如下图所示:

在这里插入图片描述

  在 app.jsonsubpackages节点中声明分包的结构:

{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/shoplist/shoplist"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages":[
        "pages/cat/cat",
        "pages/dog/dog "
      ]
    },{
      "root": "packageB",
      "pages": [
        "pages/apple/apple"
      ]
    }
  ],
}

  pages 表示当前分包下,所有页面的相对存放路径,name 表示分包的别名,注意,在分包里面所有的页面都是根据根目录才进行存放的。

在这里插入图片描述

  接下来还可以通过项目基本信息查看分包的大小情况:

在这里插入图片描述

2、打包原则

  在小程序中,分包的打包原则一共有四个,如下所示:

  • 小程序会按 subpackages 的配置进行分包,subpackages 之外的目录将被打包到主包中。
  • 主包也可以有自己的 pages(即最外层的 pages 字段)。
  • tabBar 页面必须在主包内
  • 分包之间不能互相嵌套。

3、引用原则

  ;在小程序中,分包的引用原则一共有三个,如下所示:

  • 主包无法引用分包内的私有资源。
  • 分包之间不能相互引用私有资源。
  • 分包可以引用主包内的公共资源。

请添加图片描述


总结

  感谢观看,这里就是分包的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

在这里插入图片描述

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。🎉

更多专栏订阅:

  • 😀 【LeetCode题解(持续更新中)】
  • 🚝 【Java Web项目构建过程】
  • 💛 【微信小程序开发教程】
  • 【JavaScript随手笔记】
  • 🤩 【大数据学习笔记(华为云)】
  • 🦄 【程序错误解决方法(建议收藏)】
  • 🚀 【软件安装教程】



订阅更多,你们将会看到更多的优质内容!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408425.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue3 + PDF.js 实现 PDF 预览

文章目录1 前言2 PDF 预览测试2.1 下载 PDF.js2.2 window.open 直接打开2.3 弹框形式打开3 修改配置项3.1 修改主题色为暗色系3.2 修改默认语言为简体中文3.3 打开 PDF 后默认跳转到某一页4 移除部分按钮4.1 简单按钮移除4.2 复杂按钮移除5 错误处理5.1 跨域报错5.2 默认语言为…

架构图以及vue的简介

架构图 前后端分离总架构图 ​ 前端架构设计图 ​ MVVM 架构模式 MVVM 的简介 MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模…

养老院管理系统(Java+Web+MySQL)

目 录 摘 要 1 Abstract 2 第一章 绪论 6 一、 选题的依据及意义 6 二、 国内外现状研究 6 三、 研究目的 7 四、 本文研究的主要内容 7 五、 本文章节安排 7 六、 本章小结 8 第二章 设计技术与开发环境 9 一、 相关技术介绍 9 (一) JSP简介 9 &#xf…

在vue中使用echarts

欢迎大家加入我的社区:http://t.csdn.cn/Q52km 社区中不定时发红包 文章目录1、安装2、在vue中引入(全局引入)3、在vue中的使用4、模板代码放在哪个位置5、完整的一个vue页面实例:6、实现效果7、可能遇到的问题,下载不…

vue3 解决各场景 loading过度 ,避免白屏尴尬!

Ⅰ、前言 当我们每次打卡页面,切换路由,甚至于异步组件,都会有一个等待的时间 ;为了不白屏,提高用户体验,添加一个 loading 过度动画是 非常 常见的 ;那么这几种场景我们应该把 loading 加在哪…

Vue3 - $attrs 的几种用法(1个或多个根元素、Options API 和 Composition API)

theme: smartblue 持续创作,加速成长!这是我参与「掘金日新计划 6 月更文挑战」的第6天,点击查看活动详情 本文简介 点赞 关注 收藏 学会了 使用 Vue 开发时,肯定会接触到 组件 的概念,无可避免的也会接触到 组件通…

Vue:Vue事件整理

文章目录前言一、Vue基本事件this对象传递参数总结二、事件修饰符三、键盘事件keyup/keydown四、ElementUi前言 本篇复习Vue中的事件处理,包含事件基本响应、事件修饰符、键盘事件等内容 一、Vue基本事件 Vue中,设置点击、鼠标滚动和键盘输入等相应事…

vue3【列表渲染】v-for 详细介绍(vue中的“循环”)

vue 常用语法——列表渲染 v-for文章简介v-for 主要内容&#x1f53a;item in itemsv-for 变量的作用域v-for 与对象在 v-for 里使用范围值&#x1f53a;<template> 上的 v-forv-for 与 v-if&#x1f53a;通过 key 管理状态&#x1f53a;组件上使用 v-forsummary下期预告…

前端设置页面字体尺寸跟随屏幕大小而进行变化

越来越多的前端项目现在需要这个操作&#xff0c;其操作的原因很简单&#xff0c;你的项目可能跑在小尺寸分辨率的电脑上&#xff0c;也有可能在大尺寸的会议平板上&#xff0c;更有甚者是在LED上。那么如何让你的项目根据屏幕分辨率的大小而自动变化&#xff0c;修改页面展示字…

运行调试前端项目之ts

本文分四个部分&#xff1a; 直接node或ts-node运行ts通过package.json文件运行tsts翻译为js后运行js在ide中运行和调试ts — vscode中&#xff0c;配置launch.json文件&#xff0c;来调试ts&#xff0c;与js调试一致 — idea、webstorm中&#xff0c;安装“run configuration…

vue3 超好用的富文本编辑器

Ⅰ. 前言 quillEditor 毫无疑问一款非常强大的 富文本编辑器 在 vue 中一个也非常好用 &#xff0c;而且也十分轻量的&#xff1b; 然而如今的vue3 我们该如何使用它呢 &#xff1a; Ⅱ.vue3 中 安装 quillEditor ① 下载 npm install vueup/vue-quillalpha --save② 在ma…

vite首次打开界面加载慢问题/解决

写在前面 网上都说vite要比webpack快&#xff0c;但个人感受&#xff0c;默认情况下, vite项目的启动确实比webpack快&#xff0c;但如果某个界面是首次进入&#xff0c;且依赖比较多/比较复杂的话&#xff0c;那就会比较慢了。 这篇文章就是用来记录&#xff0c;关于vite慢的…

java实现文件的下载和删除(返回输出流至前端)

文章目录引言实现步骤下载文件删除文件删除目录&#xff08;及目录下全部文件&#xff09;实现代码测试引言 最近需求中有使用到文件的下载功能&#xff0c;在之前的学习过程中我没有去注重过文件处理方面的学习&#xff0c;所以写起来还是有点吃力&#xff0c;将写出的工具类…

浏览器的组成部分

什么是浏览器&#xff1f; Web 浏览器简称为浏览器&#xff0c;是一种用于访问互联网上信息的应用软件。浏览器的主要功能是从服务器检索 Web 资源并将其显示在 Web 浏览器窗口中。 Web 资源通常是 HTML 文档&#xff0c;但也可能是 PDF、图像、音频、视频或其他类型的内容。…

IDEA2022创建Web项目配置Tomcat(图文说明)

下面是在idea上面配置一个Tomcat的项目环境。 1.首先创建普通的一个Java项目&#xff0c;不要选择JavaEE 2.创建完成后按照下图所示&#xff0c;依次选择 File -> Add Framework Support -> Web Application -> 在WEB-INF文件夹下创建classes和lib文件夹 3.下面配置…

若依前后端分离版:增加新的登录接口,用于小程序或者APP获取token,并使用若依的验证方法

LoginController类 具体代码 /*** app 登录*/AnonymousAccessPostMapping("login")public AjaxResult login(RequestBody LoginBody loginBody) {AjaxResult ajax AjaxResult.success();// 生成令牌String token loginService.login(loginBody.getUsername(), logi…

【项目实战】登录与注册业务的实现(前端+后端+数据库)

本示例基于Vue.js和mint UI实现。 目录 一、数据库的创建 二、后端接口与数据库的连接 三、前端代码实现 1.注册页相关代码 2.注册页效果 3.登录页相关代码 4.登录页效果 四、注册登录演示 五、项目文件结构 一、数据库的创建 此处以Navicat软件进行创建&#xff0c;新…

刚去公司,发现node版本过高,如何将node版本降低?

我们可以安装nvm&#xff0c;node版本管理器来实现。 1、nvm是什么&#xff1f; nvm&#xff08;node.js version management&#xff09;&#xff0c;是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具&#xff0c;为了解决node.js各种版本存在不兼容现象可以通过…

uniapp自动更新

一uniapp自动更新流程逻辑 实现检测版本更新并下载新版本&#xff1a;通过后台返回更新版本的版本号和当前版本号做比较&#xff0c;不同则提示有新版本需要更新&#xff0c;下载地址又后台返回 uniapp自动更新设计思路 在服务端配置一个最新的应用版本号&#xff1b; 并将打包…

【jQuery从入门到精通】

文章目录jQuery简介jQuery下载与安装下载版本说明优点安装jQuery核心DOM对象和Jquery包装集对象dom对象的获取获取一个不存在的dom对象jQuery对象的获取获取一个不存在的jQuery对象DOM对象与jQuery对象的转换dom对象转jQuery对象jQuery对象转dom对象jQuery选择器基础选择器层次…