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…

构建高效可靠的消息队列系统:设计与实现

目录 一、引言 二、设计目标 2.1、高可用性 1. 集群搭建 1.1 Docker Compose配置示例 2. 容错和恢复 2.1 异常检测与自动故障迁移 2.2 Spring Boot代码示例 3. 心跳检测 4. 优雅关闭 2.2、持久性 1. 生产者消息持久化 2. 队列的持久化 3. 消息队列的持久化 总结 …

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;将…

springboot(ssm环保网站 绿色环保宣传系统Java系统

springboot(ssm环保网站 绿色环保宣传系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff0…

C++ easyX小程序:画五角星

//本小程序通过调用easyX的moveto、lineto函数画出五角星编写了FiveStar函数&#xff0c;在调用这个函数时setbkcolor、setlinecolor、setfillcolor设置了背景、线及填充颜色&#xff0c;又调用floodfill函数对五角星进行颜色填充。 //代码及注释如下&#xff1a; #include<…

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 开发 下面的…

【Spring连载】使用Spring Data访问Redis(一)----快速指南

【Spring连载】使用Spring Data访问Redis&#xff08;一&#xff09;----快速指南 一、导入依赖二、Hello World程序 一、导入依赖 在pom.xml文件加入如下依赖就可以下载到spring data redis的jar包了&#xff1a; <dependency><groupId>org.springframework.boot…

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

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

STM32——点灯

STM32——点灯 1.开发准备 开发环境:keil5&#xff0c;STM32CubeMX 开发语言:C语言 烧录工具:ST-Link 库函数:HAL库 2.点灯 常用的GPIO HAL库函数&#xff1a; //GPIO初始化 void HAL_GPIO_Init(GPIO_TypeDef *GPIOx, GPIO_InitTypeDef *GPIO_Init); //调制电平 void H…

怎么创建docker镜像

创建Docker镜像可以通过以下几个步骤&#xff1a; 编写Dockerfile&#xff1a;Dockerfile是一个文本文件&#xff0c;定义了镜像的构建过程。在Dockerfile中&#xff0c;可以指定基础镜像、添加应用程序代码和依赖、设置环境变量、运行命令等。根据应用程序的需求&#xff0c;编…

Labview 图像处理系统设计

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