小程序的包被限制在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框架分包加载的步骤, 原生小程序分包方法根据官方文档即可快速实现,小程序框架虽多, 大都大同小异,如果后续有使用其他框架进行开发,会进行补充。

小程序包大小超过2M的解决方法的更多相关文章

  1. 开发微信小程序 中遇到的坑 及解决方法

    1.wx.request 只能访问 https 解决: 新建项目  不填appid  即可访问 localhost 2.页面中多重三元表达式  解析有问题 解决: <!--{{index}} { ...

  2. 小程序请求豆瓣API报403解决方法

    微信小程序使用wx.request API请求豆瓣公开api的时候,会报一个403(Forbidden)的错误.这是为什么呢?是由于来自小程序的调用过多,豆瓣来自于小程序的调用被禁止.这里收集以下三种 ...

  3. 微信小程序https发起请求失败的解决方法

    https://blog.csdn.net/yuhui123999/article/details/60572888 https://blog.csdn.net/yuhui123999/article ...

  4. 微信小程序访问豆瓣电影api400错误解决方法

    最近在跟着demo学习微信小程序,却卡在了第一步请求豆瓣电影api上,折腾了很久,代码如下: wx.request({ url : "https://api.douban.com/v2/mo ...

  5. 添加Chrome插件时出现“程序包无效”等问题的解决办法

    相较之各大浏览器,我最喜欢的便是Chrome了,不只因为Chrome搜索,也因为Google Chrome强大的插件功能. 而这一切的东风,就是"谷歌访问助手". 谷歌访问助手的下 ...

  6. 小程序--->小程序图片上传阿里OSS使用方法

    小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...

  7. vmware tools安装程序无法继续,Microsoft Runtime DLL安装程序未能完成安装。的解决方法

    vmware tools安装程序无法继续,Microsoft Runtime DLL安装程序未能完成安装.的解决方法_华英雄_新浪博客 http://blog.sina.com.cn/s/blog_5 ...

  8. HBuilder开发iPad程序不能全屏显示的解决方法

    HBuilder开发iPad程序不能全屏显示的解决方法: targets选择HBuilder=>Deployment Info=> devices选择Universal即可

  9. 关于STM32运行时程序卡在B.处的解决方法

    文章转载自:https://blog.csdn.net/u014470361/article/details/78780444 背景: 程序运行时,发现程序卡死在B.处. 解决方法: 程序卡死在B.处 ...

随机推荐

  1. lable 语句

    var is = 20; loop: while(is > 10){ console.log(is); if(is % 7 == 0){ break loop; } is --; } 结果: b ...

  2. Apache Shiro安全(权限框架)学习笔记一

    1. 授权需要继承 AuthorizingRealm 类, 并实现其 doGetAuthorizationInfo 方法 2. AuthorizingRealm 类继承自 Authenticating ...

  3. Unable to instantiate Action, xxxAction, defined for 'xxx' in namespace '/'xxxAction解决方案

    出现这个问题的原因主要有两个 1.如果项目没有使用Spring,则struts.xml配置文件中,这个action的class属性的路径没有写完整,应该是包名.类名 2.如果项目使用了Spring,那 ...

  4. input、raw_input区别,运算符,运算优先级,多变赋值方式

    目录 1. Python2中的input.raw_input赋值方式和Python3中的input赋值方式的差别 2. 运算符 3. python运算符优先级 4. 格式化输出 5. 链式赋值 6. ...

  5. svn 回退/更新/取消某个版本命令详解

    1,取消文件: svn revert 文件名 2,取消目录 svn revert --depth=infinity 目录名 3,回退版本 方法1: 用svn merge 1) 先svn up,保证更新 ...

  6. GO 空白标识符 _

    空白标识符 _ 也被用于抛弃值,如值 5 在:_, b = 5, 7 中被抛弃. _ 实际上是一个只写变量,你不能得到它的值.这样做是因为 Go 语言中你必须使用所有被声明的变量,但有时你并不需要使用 ...

  7. 无线渗透之ettercap

    无线渗透之ettercap ettercap命令查看 # ettercap -h Usage: ettercap [OPTIONS] [TARGET1] [TARGET2] TARGET is in ...

  8. STM32单片机的软件重启和远程重启

    STM32单片机可以通过以下代码实现重启(core_cm3.h).同时如果利用AT命令进行无线通讯,服务器后台和客户端之间用MODBUS通讯即4G+MODBUS RTU,可以利用F05写单个线圈的方法 ...

  9. Community Cloud零基础学习(二)信誉等级设置 & Global Search设定

    当我们创建了Community以后,我们需要对他进行定制页面来使community用户更好的使用.此篇主要描述两点,信誉等级设定以及Global Search 设定.其他的内容后期再慢慢描述. 一. ...

  10. Django学习 之 Django安装与一个简单的实例认识

    一.Django简介 1.MVC与MTV模型 (1)MVC模型 Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的. ...