微信小程序 分包：普通分包 + 独立分包_小程序分包后的话 文件引用路径不就乱了吗

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

1.分包：需要几个分包就填写几个{}对象   
    * root：分包的根目录 
    * pages：当前页面下，所有页面的相对路径
    * name：分包别名
    * independent：是否为独立分包

2.如何查看分包体积：(编译器右上角) 详情 -- 基本信息 -- 本地代码（展开就可看到）

*/
“subPackages”: [{ // 通过 subPackages 节点，声明分包结构
“root”: “package1”, // 第一个分包的根目录 相对于根目录 package1 进行存放的
“name”: “pack1”, // 分包别名
“pages”: [ //当前分包下，所有页面的相对存放路径（会自动生成对应页面 – 与上面的pages相同）
“pages/index/index”
]
}, {
“root”: “package2”,
“name”: “pack2”,
“independent”: true, //将package2，设置为独立分包
“pages”: [
“pages/index/index”
]
}],

* 2). 打包原则：
	+ 小程序会按照subPackages的配置进行分包，subPackages之外的目录将被打包到主包中
	+ 主包也可以有自己的pages（即最外层的pages字段）
	+ tabBar页面必须在主包内
	+ 分包之间不能互相嵌套
* 3). 引用原则：
	+ 主包无法引用分包内的私有资源
	+ 分包之间不能互相引用私有资源
	+ 分包可以引用主包内的公共资源


### 


### 独立分包


* 什么是独立分包：
	+ 本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行
* 与普通分包区别：
	+ 最主要区别：是否依赖于主包才能运行
	+ 普通分包：必须依赖于主包才能运行
	+ 独立分包可以再不下载主包的情况下，独立运行
* 应用场景：
	+ 可以按需将某些，具有一定功能独立性的页面配置到独立分包中，原因如下：
		- 当小程序从普通分包页面启动时，需要先下载主包
		- 独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度
* 配置方法：
	+ 在 subPackages中，设置independent: true（如上图所示👆🏻）
* 引用原则：
	+ 独立分包、普通分包、主包之间是相互隔绝的，不能互相引用彼此的资源
	+ 主包无法引用独立分包内的私有资源
	+ 独立分包之间，不能互相引用私有资源
	+ 独立分包和普通分包之间，不能互相引用私有资源
	+ **特别注意：**独立分包中**不能引用**主包内的公共资源，而普通分包**可以**



### 分包预下载


* 什么是分包预下载：
	+ 在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度
* 配置方法：
	+ 预下载分包行为，会再进入指定页面时触发。在app.json中，使用 preloadRule 定义分包预下载规则 
	```
	/*
	分包预下载规则：
	    * network：在指定网络模式下进行预下载(默认wifi)。
	        * all 不限网络  
	        * wifi  仅wifi模式下进行预下载
	        
	    * packages：需要预下载哪些分包
	        *可以通过name / root 指定预下载哪些分包
	*/
	"preloadRule": {
	    "pages/allColors/allColors": { // 需要预加载其他包的页面路径
	        "network": "all", // 在指定模式中预下载， 只有 WiFi / all 选项
	        "packages": ["package1", "pack2"] // 需要预加载的分包 -- 填写路径或者名字(name)都可以，因为都具有唯一性。如：package1为(root)路径， pack2 为(name)名字
	    }
	},


### 最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![css源码pdf](https://img-blog.csdnimg.cn/img_convert/0067337999e21290f1297a58005dd670.webp?x-oss-process=image/format,png)

![JavaScript知识点](https://img-blog.csdnimg.cn/img_convert/994eb7ab92ebb58f9e3f58a4837bd081.webp?x-oss-process=image/format,png)


讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中...(img-6vE49zJf-1715234298904)]

[外链图片转存中...(img-5Nj9cxi3-1715234298905)]