Uniapp小程序端打包优化实践

背景描述:

在我们最近开发的一款基于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.mzph.cn/news/657153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS 7如何修改用户密码

一、问题 CentOS 7如何修改用户密码? 二、解答 1、passwd命令 [rootlocalhost ~]# passwd 用户名#需要在root用户下修改 [rootlocalhost ~]# su root#切换到root下,输入密码 #修改用户的密码,按提示输入新密码和确认密码,密码是…

EPSON RC 机器人-第一个程序

创建项目 有机械人且用USB线连接好。可以USB。没有真机的选择 C4 Sample 可以运行程序。 否刚会提示【不能连接到控制器,未安装USB驱动器】 代码 按F5打开运行窗口 再点【开始】 点 【是】,查看运行结果

安装并开始设置 Windows 终端(命令提示符或Windows PowerShell或Azure Cloud Shell)

安装 安装 若要试用最新的预览功能,可能还需要安装 Windows 终端预览。 ‼️备注 如果你无法访问 Microsoft Store,GitHub 发布页上发布有内部版本。 如果从 GitHub 安装,Windows 终端将不会自动更新为新版本。 有关使用包管理器&#xff…

跟着cherno手搓游戏引擎【15】DrawCall的封装

目标: Application.cpp:把渲染循环里的glad代码封装成自己的类: #include"ytpch.h" #include "Application.h"#include"Log.h" #include "YOTO/Renderer/Renderer.h" #include"Input.h"namespace YO…

Android Studio使用小记

复制了一个原来的项目&#xff0c;准备基于它调整一个OEM版本 因为svn服务器上分出了一个单独的版本&#xff0c;于是在工程目录下手工删除了.svn文件&#xff0c;并手工去除了vcs.xml <?xml version"1.0" encoding"UTF-8"?> <project versi…

第4章 python深度学习——(波斯美女)

第4章 机器学习基础 本章包括以下内容&#xff1a; 除分类和回归之外的机器学习形式 评估机器学习模型的规范流程 为深度学习准备数据 特征工程 解决过拟合 处理机器学习问题的通用工作流程 学完第 3 章的三个实例&#xff0c;你应该已经知道如何用神经网络解决分类问题和回归…

高通GAIA V3命令参考手册的研读学习(十三):GAIA通知

如前文《高通GAIA V3命令参考手册的研读学习&#xff08;四&#xff09;》所述&#xff0c;PDU一共有四种&#xff0c;前面已经讲了命令、回应以及错误码&#xff0c;现在来看最后一种&#xff1a;通知。 4. QTIL GAIA通知 通知发送的方向&#xff0c;是由设备发送到移动应用…

【Node.js】fs与path模块的基础使用

文章目录 前言一、什么叫做模块二、fs模块2.1 fs模块是干什么的&#xff1f;2.2 fs模块的使用导入fs模块读取文件的内容写入文件内容处理路径问题path路径模块 总结 前言 在Node.js中&#xff0c;fs模块&#xff08;文件系统模块&#xff09;是一个重要的核心模块&#xff0c;…

【操作系统】调用硬盘并且实现MBR与Loader的过渡——实战篇

一.概述 有了上一篇文章&#xff1a;【操作系统】调用硬盘并且实现MBR与Loader的过渡——原理篇的理论支持&#xff0c;我们就可以开始代码实操了&#xff0c;接下来我们将优化MBR程序&#xff0c;使其从扇区中读取出loader加载器&#xff0c;并将其存放到内存处&#xff0c;将…

excel怎么设置密码?轻松保护您的工作表

在数字化时代&#xff0c;数据的安全性显得尤为重要。excel作为我们日常工作中广泛使用的办公软件&#xff0c;其中可能包含了大量的敏感数据。为了确保这些数据不被未授权的人访问&#xff0c;本文将为您详细介绍excel怎么设置密码&#xff0c;从而有效地保护您的数据安全。 方…

基于Redis的高可用分布式锁——RedLock

目录 RedLock简介 RedLock工作流程 获取锁 释放锁 RedLock简介 Redis作者提出来的高可用分布式锁由多个完全独立的Redis节点组成&#xff0c;注意是完全独立&#xff0c;而不是主从关系或者集群关系&#xff0c;并且一般是要求分开机器部署的利用分布式高可以系统中大多数存…

delphi fmxui 做的一些跨平台app

pascal语音显然已经没落&#xff0c;但delphi还在坚挺着&#xff0c;每年都会发布新版本&#xff0c; 主要是做跨平台应用。 如果你觉得qt qml 写android app 比较麻烦&#xff0c;那可以尝试delphi 12&#xff0c;可以用c builder 尝试 android&#xff0c;ios 开发 下面的…

适用于 Windows 7/8/10/11电脑的 12 款顶级数据恢复软件

很多时候&#xff0c;我们在 Windows 7 /8/10/11下不小心按了删除键&#xff0c;从而丢失了硬盘或 USB 驱动器中的重要文件和数据。在某些情况下&#xff0c;病毒或软件错误可能会损坏您的硬盘&#xff0c;从而影响您的文件。在这种情况下&#xff0c;您迫切需要一款适用于 Win…

Labview 图像处理系统设计

1. 总体主界面设计 前面板界面如下&#xff1a; 界面总共分为一个实时采集加拍照控制模块&#xff0c;两个图像显示模块&#xff08;实时图像显示和直方图显示&#xff09;以及三个图像处理模块 前面板中各模块具体功能及使用说明如下&#xff1a; 1.当实时按钮关闭时&#x…

mysql .ibd 文件过大清理方法

问题 有一个 info_track 表用来临时存储告警推送数据&#xff0c;逻辑处理完成后&#xff0c;会执行 Delete 语句删除对应的记录。 问题&#xff1a;项目现场运行了几个月后&#xff0c;发现磁盘空间莫名占用了过多的存储&#xff0c;> 100GB&#xff0c;且无法释放。 生…

向上调整向下调整算法

目录 AdjustUp向上调整 AdjustDown向下调整 AdjustUp向上调整 前提是&#xff1a;插入数据之后&#xff0c;除去插入的数据其他的数据还是为堆 应用&#xff1a;插入数据。 先插入一个10到数组的尾上&#xff0c;再进行向上调整算法&#xff0c;直到满足堆。 性质&#xff1…

基础算法(二)

一 高精度计算 int能表示范围为2^32&#xff0c;这看起来很大&#xff0c;但在大数据时代的如今&#xff0c;不说是int 哪怕是long long也是不够的&#xff0c;那么为了使用或计算这些超出或远超整形大小的数&#xff0c;我们这些数的计算方法称为高精度计算。 &#xff08;1)…

代码随想录 Leetcode113. 路径总和 II

题目&#xff1a; 代码(首刷看解析 2024年1月30日&#xff09;&#xff1a; class Solution { public:vector<int> temp;vector<vector<int>> res;void recursion(TreeNode* cur, int sum) {if (!cur->left && !cur->right && sum 0…

Java进击框架:Spring-WebFlux(九)

Java进击框架&#xff1a;Spring-WebFlux&#xff08;九&#xff09; 前言Mono和FluxSpring WebFlux反应的核心DispatcherHandler带注释的控制器WebFlux配置 WebClient配置retrieve()交换请求正文Filters属性语境同步使用测试 RSocket反应库 前言 Spring框架中包含的原始web框…

Jmeter分布式场景

Jmeter分布式 1. 为什么使用Jmter分布式测试 1.1 需求 对学院接口(查询学院-所有)进行1000用户并发访问&#xff0c;测试服务器处理批量请求能力1.2 现状 我们单台电脑由于配置(CPU、内存)问题&#xff0c;最模拟500用户时&#xff0c;就出现卡死现象按照一般的压力机配置&…