小程序包体积压缩优化，下降500k起步
由于公司小程序包体积过大,已经达到1.9m了,微信定义小程序单个代码包(主包/分包)上限为2m,所以小程序该减肥了
如果你按我的步骤都做了,体积没有减少，ok，来打我
文章目录
- 第一步：最直接的方式 --- 图片优化
- 第二步：优化体积主要方法 --- 分包
- 第三步：删除无依赖代码
- 第四步：小程序开发工具开启代码压缩
- 第五步：优化代码逻辑、封装公用组件方法
- 第六步：懒加载方式引入第三方组件
第一步：最直接的方式 — 图片优化
- 我们在小程序中尽量不要存放过多的图片,尽量把图片放到阿里云CDN,放之前一定要压缩
- 本地的图片一定要压缩,我这里就发现之前同事有一些图片没有进行压缩,导致部分空间占用
推荐使用图片压缩工具:https://tinypng.com/ (支持批量压缩,批量下载)
看下面这张图,第一次直接压缩84%,压缩了100多k,第二次压缩的时候就只能压缩2%
因为已经到达最小体积了,再压缩就会失真.所以压缩一次就够了
第二步：优化体积主要方法 — 分包
这一步骤相信大家都很熟悉，所以我就详细讲一下:微信分包文档
分包分为常规分包和独立分包 两种分包稍微有点区别
- 常规分包：访问分包页面时需要下载主包
- 独立分包：访问不需要下载主包，使用independent开启，官网介绍
分包加载具有以下优势：
- 承载更多功能
- 降低代码包下载耗时：使用分包后可以显著减少启动时需要下载的代码包大小
- 降低小程序代码注入耗时
- 降低页面渲染耗时
- 降低内存占用：分包能够实现页面、组件和逻辑较粗粒度的按需加载，从而降低内存的占用。
在小程序中那些内容可以分包
- 活动页、广告页
- 用户页面访问量占比相对较少，比如一些页面只有一批指定的人才可以访问
- 通常功能不是很复杂且相对独立的内容也可以进行分包
具体分包内容可根据实际开发需求和逻辑进行衡量是否分包
使用了分包最好在app.json中通过 preloadRule 开启分包预下载，提高用户体验 官网
第三步：删除无依赖代码
在我我们小程序中可能存在一些并没用使用的一些页面或js文件
我们可以自己衡量项目中是否还需要，这些文件是不是真的是无依赖文件、废物文件
在我们小程序开发这工具中可以清楚地看到那些文件为无依赖文件
第四步：小程序开发工具开启代码压缩
在我们小程序开发工具中勾选上传代码时自动压缩功能，棒棒哒。
之前通过gulp压缩的代码的方式，和通过小程序开发工具上传时自动压缩，预览体积大小差不多
gulp压缩的稍微比小程序压缩的体积要小10k左右，没太大的变化，所以就就直接小程序压缩就好了哟
第五步：优化代码逻辑、封装公用组件方法
在我们开发项目的时候尽量多考虑一下，多封装，减少无用代码，js和css都尽量进行代码复用，重复方法，重复样式进行抽离
- 减少不必要的代码，避免出现重复的代码（例如小程序自动生成的一些生命周期方法，页面不需要就可以删掉）
- 页面避免不必要的组件嵌套，能用一个 view 做到的，就不要再多套一层 view
- 尽量的复用页面，判断逻辑写在页面中区分。
- 封装公共方法，公共页面（比如登录授权逻辑、用户是否开启用户定位信息、消息订阅方法等）
第六步：懒加载方式引入第三方组件
我们小程序一般会引入第三方组件样式，比如 vant 、Thor 、ColorUI 等
我们按照官网的步骤进行安装完成的时候会发现有两个文件 node_modules 和 miniprogram_npm 两个文件，前者不会参加编译上传
miniprogram_npm是我们通过npm构建后的包，是小程序引用的包，找到下面的第三方组件，把一些项目中没用到的组件删除
ok到此结束
把上面的步骤都做过了，相信你的包体积已经下降了很多吧！
如果有没写道的，欢迎补充，如果哪里写错了，我接受批评。
小程序包体积压缩优化，下降500k起步相关推荐
- 微信小程序包体积过大解决方法
因为微信开发者工具提交需要整个项目大小不超过2M,超过2M则不能提交,会出现下面这个报错 解决方法: 1.在Hbuilder x上面勾选上运行时压缩代码 2.分包操作 在pages.json文件中设置 ...
- 小程序打包体积过大的解决方案
一 背景 分包是小程序给出的类似于web异步引入的一个方案,把一些初始进入时不需要的页面放到分包里,跳转到对应页面时再去下载分包,从而有效减少主包体积. 项目背景: 公司的小程序项目使用taro来实现 ...
- 解决uniapp小程序打包体积超过2M，提示包体积超过2M，“main packagexxx”,不给上传和预览的解决办法，绝对有效
解决办法,原文地址: 解决uniapp小程序打包体积超过2M,提示包体积超过2M,"main packagexxx",不给上传和预览的解决办法,绝对有效!在微信小程序开发中,为了解 ...
- 关于微信小程序打包文件vendor.js超过500k的压缩方案
关于微信小程序打包文件vendor.js超过500k的压缩方案 因为是开发环境,所以没进行UglifyJs压缩,所以解决的方法来了,引入UglifyJs插件 修改build目录下 的webpack.d ...
- android assets大小限制200m,使用 AssetsManager 解决微信小游戏包体积尺寸限制问题
原标题:使用 AssetsManager 解决微信小游戏包体积尺寸限制问题 自微信小游戏发布以来,已有许多开发者将早前使用白鹭引擎开发的游戏迁移至微信小游戏.但是在开发过程中,开发者普遍会遇到微信小游 ...
- 微信小程序Canvas卡顿优化解决方法
文章目录 一.引入 二.分析问题 三.解决方法 四.解决后效果图 五.绘制好的地图 一.引入 原安卓图书馆选座项目CSDN博客链接: Android图书馆选座系统课程设计 最近在搞微信小程序,想把以前 ...
- 一种小程序弱网离线优化的思路
作者:孙然(煮虾) 当我遇到弱网...... 电梯中查看钉钉日程详情,但打不开,得走进办公室连上 WiFi,重新操作一遍打开日程 走出办公楼一段距离了,依然连接着公司 WiFi,但信号极弱,又不能自动 ...
- 通过安卓手机，获取微信小程序包进行反编译方法
要求 安装Nodejs 一台root后的安卓手机或者装有可以打开微信小程序的安卓模拟器 一个敢于折腾的耐心 准备 安装反编译工具 [推荐]方法一:你可以通过git clone将它存在本地 git cl ...
- Fiddler爬取抓包（网页及小程序包）
前言: 关于抓包的工具比较多,如: Charles : Fiddler : Wireshark:BurpSuite (常用).今天演示讲解Fiddler抓包工具. 下载Fiddler Classic ...
最新文章
- 斯坦佛编程教程-Unix编程工具（四）
- python双星号什么运算_python – 双星号
- [Aaronyang] 写给自己的WPF4.5 笔记6[三巴掌-大数据加载与WPF4.5 验证体系详解 2/3]
- cambridge ifm strategic roadmapping takecontrol in times of uncerntainty
- Windows 程序包管理器 1.0 正式发布
- 项目总结SpringMVC相关
- RocketMQ源码解析-PushConsumer(2)
- 企业职工能实行弹性退休吗？
- 图论专题考试2 爆零祭
- 匹配追踪分解 时频 matlab,基于匹配追踪(MP)算法的信号自适应分解研究及其应用...
- TextInput组件练习 - QQLogin界面
- 车机开发之均衡器app开发
- DBUtils详细介绍+实例
- iOS 项目默认竖屏 个别页面横屏
- .NET 再出发, 20岁生日快乐
- 【PDF】《操盘手》
- w10系统打不开服务器共享打印机,win10系统无法共享打印机的方案
- 【软件架构】Michael Perry关于不可变架构、CAP定理和CRDTs
- IDEA代码重构技巧--迁移
- 航天五院待遇2011zz