Uniapp小程序端打包优化实践

news/2024/7/20 0:51:34 标签: uni-app, 小程序

背景描述:

在我们最近开发的一款基于uniapp的小程序项目中,随着功能的不断丰富和完善,发现小程序包体积逐渐增大,加载速度也受到了明显影响。为了提升用户体验,团队决定对小程序进行一系列打包优化。


项目优化点:

  1. 代码精简与重构
    我们首先对项目进行全面梳理,通过ESLint等工具检查并删除了未使用的变量、函数和组件。同时,对冗余逻辑进行了合并和简化,并采用更高效的编码方式,例如用解构赋值替代传统的变量定义。

  2. 条件编译与按需加载
    对于不同平台的小程序,我们充分利用uniapp的条件编译特性,只引入目标平台所需的API和组件。此外,对于大型业务模块或不常使用的功能组件,采用了异步加载策略,避免一次性加载所有内容导致主包过大。

  3. 第三方库优化
    项目中使用了一些第三方库,比如axios用于网络请求,UI库等。通过Webpack的Tree Shaking功能,剔除了库中未使用的部分。同时,对于非核心依赖,考虑使用CDN引用或者将其拆分至分包中。

  4. 资源优化
    所有图片资源都经过压缩处理,确保在不影响视觉效果的前提下减小文件大小。并且针对一些不常用的大图资源,采取了懒加载策略。另外,考虑到WebP格式的高效率,将部分图片转换为WebP格式。

  5. 分包策略
    鉴于主包体积接近微信小程序2MB的限制,我们将部分非首屏展示的功能模块(如用户中心、设置页等)迁移到子包中,实现按需加载,显著减少了首次加载时的数据传输量。

  6. 构建配置调整
    在HBuilderX中,我们开启了JavaScript代码压缩选项,将ES6代码转译为兼容性更好的ES5代码,并且移除console.log等调试语句以进一步减少代码体积。

  7. GZip压缩
    联系服务器运维团队,在服务器端开启GZip压缩,有效降低了实际传输过程中静态资源的大小。

经过这一系列优化措施,我们的小程序包体积成功从原来的近3MB降低到约1.5MB,加载速度有了显著提升,用户反馈页面打开更加流畅,整体体验得到了极大改善。这个案例充分展示了在uniapp开发小程序时,细致深入的打包优化工作的重要性。


实际项目优化

优化前分析

在这里插入图片描述
在这里插入图片描述
以上图片中可以看到主包很大 , 原因是 uviewUI库 和 框架依赖问题导致

优化项目

开启 hbuilder 上传代码压缩在这里插入图片描述

开启运行是否压缩代码
在这里插入图片描述

压缩后还是大于2MB
在这里插入图片描述

可以看出uviewUI库还是有点大,图片静态资源可以放到服务器上,使用网络图片
在这里插入图片描述

再次优化

减少在uni.scss 中的样式。uni.scss的样式会导入uview每一个组件的scss中在这里插入图片描述

尽量别去动 theme.scss里面的样式,这也会导致uview每一个组件的添加了scss样式
所以我们把这里的样式去掉,在看一下
在这里插入图片描述

可以看到优化成功
在这里插入图片描述

这里我们可以看到uviewUI 小了很多 1.03MB => 138 KB
在这里插入图片描述


http://www.niftyadmin.cn/n/5354775.html

相关文章

flutter+go构建的即时通讯app,ChatCraft

前言 Hi👋all.好久不见,已经两个多月没有发文章了,这段时间一直在反思过去的一年,有好有坏。对博客文章这块我对自己是不满意的,文章的质量参差不齐,有时候在没有好的题材时,我会选择写一些泛泛…

力扣题目训练(6)

2024年1月30日力扣题目训练 2024年1月30日力扣题目训练367. 有效的完全平方数374. 猜数字大小383. 赎金信99. 恢复二叉搜索树105. 从前序与中序遍历序列构造二叉树51. N 皇后 2024年1月30日力扣题目训练 2024年1月30日第六天编程训练,今天主要是进行一些题训练&…

Spring Cloud中@RefreshScope实现动态刷新的原理

在现代微服务架构中,Spring Cloud已经成为了一种流行的选择,它提供了许多用于构建和部署微服务的工具和库。其中,动态刷新配置是Spring Cloud中一个非常有用的特性,它允许我们在不重启服务的情况下更新配置。这个特性是通过Refres…

鸿蒙系统扫盲(七):勘误补充总结,收个尾

这是笔者鸿蒙扫盲系列的最后一篇了,准备对过去的六篇扫盲系列文章,错误的地方做一些勘误,并且补充更新一些朋友们感兴趣的知识,最后收个尾。 1.勘误,编译型语言和解释型语言 在鸿蒙系统扫盲(五&#xff0…

QEMU - e1000全虚拟化前端与TAP/TUN后端流程简析

目录 1. Host -> Guest 2.Guest ->Host 3. 如何修改以支持TUN设备的后端? 4. 相关 QEMU 源码 5. 实验 1. Host -> Guest 2.Guest ->Host 3. 如何修改以支持TUN设备的后端? 1. 简单通过后端网卡名字来判断是TUN还是TAP。 2. 需要前端全…

npm 以组织为单位发布依赖包(@username/package-name、@org-name/package-name)

示例: ant-design/aliyun-theme ant-design/antd-theme-variable ant-design/charts // ...1. 注册组织 在官网注册相应的组织,npmjs.com 以个人账号登录。点击头像找到 Add Organization,填写相关信息,创建完成。 2. 发布 首…

NonDefUseDependency及例子

在研究ReassociatePass的优化时,我发现了其中有一个函数bool llvm::mayHaveNonDefUseDependency(const Instruction &I) {,这个函数会判断一个指令是否是不可优化的,也即是否是可能会造成NonDefUseDependency的。 潜在的非定义使用依赖关…

数学知识第六期 中国剩余定理

前言 中国剩余定理也要学好的哈,共勉!!! 一、中国剩余定理的介绍 中国剩余定理释义:又称“孙子定理”。1852年,英国来华传教士伟烈亚力将《孙子算经》中“物不知数”问题的解法传至欧洲。1874年&#xff…