个人微信公众号:程序猿的月光宝盒
目录
- 0. 缘由
- 1. 关于分包
- 1.0 这是 官方文档
- 1.1 注意事项
- 2.使用方法
- 2.1 首先你得有个uniapp的微信小程序项目
- 2.2 在pages同级创建分包
- 2.3 pages.json配置
- 2.4 然后呢,官网支持了 分包优化
- 2.5 怎么跳转呢?
- 2.6 然后重启微信开发工具运行
0. 缘由
最近工作在接触uni-app,用它来开发微信小程序,也是第一次接触,找了很久,还有大佬用自己写的函数做的,俺觉得我不会也不配,刚好看到下面评论是官方也支持了,所以就用官方的了,这里记录一下
1. 关于分包
好像是规定小程序不能超过2M,一旦超过就需要分包,因为是公司项目,肯定超过,所以就做个演示,权当记录吧
1.0 这是 官方文档
1.1 注意事项
subPackages
里的pages的路径是root
下的相对路径,不是全路径。- 微信小程序每个分包的大小是2M,总体积一共不能超过16M。
- 百度小程序每个分包的大小是2M,总体积一共不能超过8M。
- 支付宝小程序每个分包的大小是2M,总体积一共不能超过4M。
- QQ小程序每个分包的大小是2M,总体积一共不能超过24M。
- 分包下支持独立的
static
目录,用来对静态资源进行分包。uni-app
内支持对微信小程序、QQ小程序、百度小程序分包优化,即将静态资源或者js文件放入分包内不占用主包大小。详情请参考:关于分包优化的说明- 针对
vendor.js
过大的情况可以使用运行时压缩代码
HBuilderX
创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
cli
创建的项目可以在pacakge.json
中添加参数--minimize
,示例:"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
2.使用方法
2.1 首先你得有个uniapp的微信小程序项目
这里假设你有了,原始项目结构
用微信开发工具打开的样子,没有分包之前
2.2 在pages同级创建分包
2.3 pages.json
配置
2.4 然后呢,官网支持了 分包优化
- 在对应平台的配置下添加
"optimization":{"subPackages":true}
开启分包优化- 目前只支持
mp-weixin
、mp-qq
、mp-baidu
的分包优化- 分包优化具体逻辑:
- 静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用
- js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)
- 自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息
我的理解呢就是,既然你分包了功能模块,那相应的静态资源你得分吧,用图片的时候直接是分包下的路径,这才是个完整的分包.
这里我以微信小程序为例,
2.5 怎么跳转呢?
在需要点击跳转的地方就好啦
uni.navigateTo({ url: '/myPackageA/pages/piece/piece' })
2.6 然后重启微信开发工具运行
可以看到已经分包成功
最后上个演示GIF 叭
原文转载:http://www.shaoqun.com/a/488136.html
拍拍购物:https://www.ikjzd.com/w/2205
菜鸟网络:https://www.ikjzd.com/w/1547
笨鸟:https://www.ikjzd.com/w/2713
基于uni-app的微信小程序之分包作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒目录0.缘由1.关于分包1.0这是官方文档1.1注意事项2.使用方法2.1首先你得有个uniapp的微信小程序项目2.2在pages同级创建分包2.3pages.json配置2.4然后呢,官网支持了分包优化2.5怎么跳转呢?2.6然后重启微信开发工具运行0.缘由 最近工作在接触uni-app,用它来开发微信小程
淘粉8:https://www.ikjzd.com/w/1725
亚马逊t恤:https://www.ikjzd.com/w/1932
掌握shopee的站内引流办法,快速收割流量:https://www.ikjzd.com/home/91226
北京旅游总要和北京美食相伴:http://tour.shaoqun.com/a/66844.html
死亡工厂 - :http://tour.shaoqun.com/a/14193.html