小程序包大小超过2M的解决方法
小程序的包被限制在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.wx.request 只能访问 https 解决: 新建项目 不填appid 即可访问 localhost 2.页面中多重三元表达式 解析有问题 解决: <!--{{index}} { ...
- 小程序请求豆瓣API报403解决方法
微信小程序使用wx.request API请求豆瓣公开api的时候,会报一个403(Forbidden)的错误.这是为什么呢?是由于来自小程序的调用过多,豆瓣来自于小程序的调用被禁止.这里收集以下三种 ...
- 微信小程序https发起请求失败的解决方法
https://blog.csdn.net/yuhui123999/article/details/60572888 https://blog.csdn.net/yuhui123999/article ...
- 微信小程序访问豆瓣电影api400错误解决方法
最近在跟着demo学习微信小程序,却卡在了第一步请求豆瓣电影api上,折腾了很久,代码如下: wx.request({ url : "https://api.douban.com/v2/mo ...
- 添加Chrome插件时出现“程序包无效”等问题的解决办法
相较之各大浏览器,我最喜欢的便是Chrome了,不只因为Chrome搜索,也因为Google Chrome强大的插件功能. 而这一切的东风,就是"谷歌访问助手". 谷歌访问助手的下 ...
- 小程序--->小程序图片上传阿里OSS使用方法
小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...
- vmware tools安装程序无法继续,Microsoft Runtime DLL安装程序未能完成安装。的解决方法
vmware tools安装程序无法继续,Microsoft Runtime DLL安装程序未能完成安装.的解决方法_华英雄_新浪博客 http://blog.sina.com.cn/s/blog_5 ...
- HBuilder开发iPad程序不能全屏显示的解决方法
HBuilder开发iPad程序不能全屏显示的解决方法: targets选择HBuilder=>Deployment Info=> devices选择Universal即可
- 关于STM32运行时程序卡在B.处的解决方法
文章转载自:https://blog.csdn.net/u014470361/article/details/78780444 背景: 程序运行时,发现程序卡死在B.处. 解决方法: 程序卡死在B.处 ...
随机推荐
- IIS7和IIS8环境下 ThinkPHP专用URL Rewrite伪静态规则
这是适用于IIS7,IIS7.5,IIS8.0及以上的ThinkPHP的伪静态规则,把以下代码保存成web.config文件,放到FTP的web目录内即可. <?xml version=&q ...
- php基础 php 全局变量
$_GET ----->get传送方式 $_POST ----->post传送方式 $_REQUEST ----->可以接收到get和post两种方式的值 $GLOBALS ---- ...
- FreeSWITCH调用第三方TTS 使用tts_commandline
FreeSWITCH 支持调用第三方TTS命令,本身已经搭好了框架,只需要配置即可用. 下面写一下步骤,以免忘记,也希望给你带来帮助. 第一步:编译模块mod_tts_commandline,并加载. ...
- 折腾前端条形码(Barcode)扫描识别, 笔记
barcode @zxing/library 方案 本地勉强把 Demo 在 React 里面跑通, 但是不好控制开始结束, API 不明确.实际识别率很低. 我是用手机屏幕放的条形码, 大概也有影响 ...
- ISBN号码(0)<P2008_1>
ISBN号码 (isbn.pas/c/cpp) [问题描述] 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规定格式如“x-xxx-xxxx ...
- git 删除分支和回退到以前某个提交版本
1.git 创建和删除分支: 创建:git branch 分支名字 本地删除:git branch -D 分支名字 远程删除:git push origin :分支名字 2.git 回退到以前提交的版 ...
- Python流程控制-1 顺序执行
流程控制指的是代码运行逻辑.分支走向.循环控制,是真正体现我们程序执行顺序的操作.流程控制一般分为顺序执行.条件判断和循环控制. 顺序执行 Python代码在执行过程中,遵循下面的基本原则: 普通语句 ...
- Django:cookie和session相关问题
http://www.cnblogs.com/fnng/p/3750596.html http://www.cnblogs.com/chenchao1990/p/5283725.html
- LCS(最长公共子序列)
这个问题很有意思,在生物应用中,经常需要比较两个(或多个)不同生物体的DNA片段.例如,某种生物的DNA可能为S1 = ACCGGTCGAGTGCGCGGAAGCCGGCCGAA,S2 = GTCGT ...
- Windows密码安全性测试
一.本地管理员密码如何直接提取 1.1直接通过mimikatz读取管理员密码 (不能交互式,不能在webshell下用,图形化界面很好用) 第一条:privilege::debug ...