小程序的包被限制在2M以下, 超出的时候点击预览, 发现报错:
Error: 代码包大小为 3701 kb,上限为 2048 kb,请删除文件后重试
1. 优化代码, 删除掉不用的代码
2. 图片压缩或上传服务器
一般图片所占空间较大,尽量不要放在小程序本地文件夹中,如果图片不多我们也可以对图片进行压缩,我经常使用的图片压缩平台:点击这里;
也可以将图片上传到服务器上,进行外链引用, 我们使用的是阿里云oss存储, 另外也可以通过图片托管平台对图片进行托管, 我找到的的图片托管平台:点击此处;
另外, 通过cli命令创建的uni app项目,可将图片或字体图标放入assets文件夹下,通过require引入, 也可减少主包大小
3. 分包加载
官方推出小程序分包加载这一功能,对于万千小程序开发者来说这无疑是天大的喜讯,关于如何分包,微信官方文档已经解释的十分清楚,在进行分包之前建议认真阅读官方文档。
接下来简单介绍一下在不同框架中的使用:
在uni app中:
uni app通过cli初始化的小程序目录结构如下:
├── src
├── main.js
├── App.vue
├── pages.json
├── manifest.json
├── orderPackages
│ └── pages
│ ├── goodsDetail
│ └── myorder
├── pages
│ ├── index
│ └── user
└── utils
需在pages.json中配置subPackages字段
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "个人中心"
}
}
],
"subPackages": [{
"root": "orderPackages",
"pages": [{
"path": "pages/goodsDetail/goodsDetail",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/myorder/myorder",
"style": {
"navigationBarTitleText": "我的订单"
}
}
]
}]
}
在页面中跳转分包页面路径:
uni.navigateTo({
url: `/orderPackages/pages/order/order`
})
在taro中:
taro初始化的小程序目录结构如下:
├── src
├── app.js
├── app.scss
├── index.html
├── packageA
│ └── pages
│ ├── goodsDetail
│ └── myorder
├── pages
│ ├── index
│ └── user
└── utils
需在app.js中配置subPackages字段
config = {
pages: [
'pages/index/index',
'pages/user/user'
],
subPackages: [
{
'root': 'packageA',
'pages': [
'pages/goodsDetail/goodsDetail',
'pages/myorder/myorder'
]
}
]
}
在页面中跳转分包页面路径:
taro.navigateTo({
url: `/orderPackages/pages/order/order`
})
以上只罗列了uni app和taro框架分包加载的步骤, 原生小程序分包方法根据官方文档即可快速实现,小程序框架虽多, 大都大同小异,如果后续有使用其他框架进行开发,会进行补充。
来源:oschina
链接:https://my.oschina.net/u/4403673/blog/3345416