详细讲解uniapp转小程序分包教程！！！

建立分包文件夹

在pages同级目录下创建文件夹为分包文件夹，如pagesA,这个文件夹就是分包的页面路径，以及这些页面所用到的组件资源都可以放在pagesA这个文件中。(建议静态资源放在网络上,减少包的内存占有)

├── components

├── App.vue

├── main.js

├── pagesA

│ └── my

├── pagesB

│ └── list

├── pages

│ ├── index

│ └── logs

└── static

分包配置

root为打包的根路径。其下pages为分包的页面配置(注意分包配置的path,在其他包中不能重复设置)

配置page.json文件，在和pages同级配置subpackages

“subPackages”: [{

“root”: “pagesA”, //分包根路径

“name”: “pack2”, //分包名字可写可不写

“pages”: [{

“path”: “video/video”, //分包根路径下的页面路径

“style”: { // 页面样式

“navigationStyle”: “custom”

}

},

]

}],

//预加载配置,可以提高用户体验

“preloadRule”: {

“pagesA/video/video”: { //想要实现预加载的页面路径

“network”: “all”, //指定网络 all 不限网络 wifi：仅wifi

“packages”: [“subpages”] // 进入页面后预下载分包的 root 或 name。__APP_表示主包。

}

},

建议：

推荐一个包的页面在12个内，以防后期更改需求，需要增加页面等，导致超出小程序上传的每个包的最大容量，在定义在Taber的页面，必须放在主包下；

preloadRule属性

预载入属性，但通常情况下不建议使用。

效果

在你进入到某个页面时，如果是你设定了preloadRule的页面，他就会默认的加载你需要加载的那整个分包，即便时之前以及预载过了。大大浪费了许多加载资源，延迟了小程序的人机体验度

预加载成功使用 preloadSubpackages查看

进入触发预加载页面时查看log 会打印 preloadSubpackages 信息，显示 success即为成功

触发页面的选取也要注意，既要能满足用户的体验但也要注意预加载分包会对当前页面的加载速度有一定的影响

图片分包

图片放在根目录的static下面，打包的时候是直接打包到我们的主包下面，这样主包的负荷就会非常大，项目相对大一点的时候，图片也是非常占据资源的，所以这里也做一个分包处理。

一个图片文件夹，命名按需求，图片下面的分包图片必须和你分包的页面名称一致，方便改路径

静态文件分包

在HBuilderX中文件manifest.json中选择源码视图，找到mp-weixin添加以下代码：

“optimization”:{

“subPackages”:true

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

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

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

[外链图片转存中…(img-VcMkMh4K-1714762046730)]

[外链图片转存中…(img-Cm4Ew2X5-1714762046731)]