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.mfbz.cn/a/359402.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

近期作业总结(函数,递归,二进制)

二分查找函数 写一个二分查找函数 功能&#xff1a;在一个升序数组中查找指定的数值&#xff0c;找到了就返回下标&#xff0c;找不到就返回-1。 int bin_search(int arr[], int left, int right, int key) {int mid 0;while (left < right) {mid (right left) / 2;if…

Labview 图像处理系统设计

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

代码随想录day15--二叉树的应用3

LeetCode110--平衡二叉树 题目描述&#xff1a; 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 示例 1&#xff1a; 输入&#xff1a…

Kotlin快速入门系列8

Kotlin的泛型 与Java一样&#xff0c;Kotlin也提供泛型。泛型&#xff0c;即 "参数化类型"&#xff0c;将类型参数化&#xff0c;可以用在类&#xff0c;接口&#xff0c;方法上。可以为类型安全提供保证&#xff0c;消除类型强转的烦恼。声明泛型类的格式如下&…

《CSS3》田字网格背景(外实线内虚线)的实现

一、前言 记录一些有趣的CSS实现方式&#xff0c;总所周知&#xff0c;当一段效果可以通过CSS实现的时候&#xff0c;绝不使用Javascript来实现&#xff0c;因此记录一些有意思的CSS效果&#xff0c;一来是方便自己学习&#xff0c;另一来是方便以后在需要使用到的时候能快速找…

基于yolov2深度学习网络的视频手部检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 输入mp4格式的视频文件进行测试&#xff0c;视频格式为1080p30. 2.算法运行软件版本 matlab2022a 3.部分核心程序 ..........................…

burp靶场--xss下篇【16-30】

burp靶场–xss下篇【16-30】 https://portswigger.net/web-security/all-labs#cross-site-scripting 实验16&#xff1a;允许使用一些 SVG 标记的反射型 XSS ### 实验要求&#xff1a; 该实验室有一个简单的反射型 XSS漏洞。该网站阻止了常见标签&#xff0c;但错过了一些 S…

win wsl2 Ubuntu-22.04 设置时间为国内时间

使用 wsl2 安装 Ubuntu-22.04 后 时间不正确&#xff0c;主要有两个原因 时区设置不正确&#xff0c;国内为京八区。 时区正确后&#xff0c;没有同步时间。&#xff08;大部分人容易忽略这一点&#xff09; Linux 默认情况下使用 UTC 格式作为标准时间格式&#xff0c;如果在…

云原生Kubernetes: Ubuntu 安装 K8S 1.23版本(单Master架构) 及故障恢复

目录 一、实验 1.环境 2.安装 Ubuntu 3.连接Ubuntu 4.master节点安装docker 5.node节点安装docker 6.master节点安装K8S 7.添加K8S工作节点 8.安装网络插件calico 9.故障 10.故障恢复 11.测试k8s网络和coredns 二、问题 1.Ubuntu如何修改镜像源 2.Ubuntu和Windo…

STM32F407移植OpenHarmony笔记3

接上一篇&#xff0c;搭建完环境&#xff0c;找个DEMO能跑&#xff0c;现在我准备尝试从0开始搬砖。 首先把/device和/vendor之前的代码全删除&#xff0c;这个时候用hb set命令看不到任何项目了。 /device目录是硬件设备目录&#xff0c;包括soc芯片厂商和board板级支持代码…

Qt 基础之QDataTime

Qt 基础之QDataTime 引言一、获取(设定)日期和时间二、时间戳三、时间计算 (重载运算符) 引言 QDataTime是Qt框架中用于处理日期和时间的类。它提供了操作和格式化日期、时间和日期时间组合的功能。QDataTime可以用于存储和检索日期和时间、比较日期和时间、对日期和时间执行算…

华为——NGFW Module安装在集群交换机上,二层双机负载分担部署,交换机重定向引流

NGFW Module安装在集群交换机上&#xff0c;二层双机负载分担部署&#xff0c;交换机重定向引流 业务需求 如图1所示&#xff0c;两台交换机集群组网&#xff0c;两块NGFW Module分别安装在两台交换机的1号槽位组成双机负载分担组网。NGFW Module工作在二层&#xff0c;也就是…

FileViewer纯前端预览项目Vue2 demo

FileViewer 项目Vue2 demo 本demo基于vue-clijsvue2.x构建&#xff0c;如果您需要vue3版本的demo&#xff0c;请前往main分支。 适用于Vue2 Webpack&#xff0c;本集成方法要求最低Webpack版本为5&#xff0c;也就是Vue Cli Service 5.0.0以上&#xff0c;当然&#xff0c;if…

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-4 Document

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>Document</title> </head><body> <canvas id"cavsElem" width"400" height"600">您的浏览器不支持Canvas…

flutter module打包成framework引入原生工程

Flutter - 将 Flutter 集成到现有项目&#xff08;iOS - Framework篇&#xff09; 本篇文章大幅参考了 caijinglong 大佬的总结文章&#xff1a; 把flutter作为framework添加到已存在的iOS中[1] 用 Flutter 来开发&#xff0c;从来都不可能是新开的一个纯 Flutter 项目&#xf…

【LVGL源码移植环境搭建】

LVGL源码移植&环境搭建 ■ LVGL源码移植■ 下载LVGL源码■ 修改LVGL文件夹■■■■ 视频链接 Ubuntu模拟器环境建置 ■ LVGL源码移植 ■ 下载LVGL源码 LVGL源码 我们以选择v8.2.0为例&#xff0c;选择8.2.0下载 ■ 修改LVGL文件夹 1.我们只需要关注这5个文件即可&…

java常量和kotlin常量

在java中使用final声明常量在kotlin中使用const val声明常量 常量在编译为字节码后会直接把调用常量的地方直接替换为常量值&#xff0c;示例如下&#xff1a; public class ConstDemo {public static final String NAME "Even";private static final int ID 100…

PythonSSTI漏洞

一&#xff0c;python内置PYC反编译&#xff1a; pyc文件&#xff0c;就是python的代码生成的字节码文件&#xff0c;有些类似于Java中的.class文件&#xff0c;pyc文件可以经过本地python解释器进行运行&#xff0c;从而实现跨平台。 也就是说我们得到了.pyc文件&#xff0c;就…

Selenium 隐藏浏览器指纹特征的几种方式

我们使用 Selenium 对网页进行爬虫时&#xff0c;如果不做任何处理直接进行爬取&#xff0c;会导致很多特征是暴露的 对一些做了反爬的网站&#xff0c;做了特征检测&#xff0c;用来阻止一些恶意爬虫 本篇文章将介绍几种常用的隐藏浏览器指纹特征的方式 1. 直接爬取 目标对…

vector的相关概念及常用接口

vector的基本概念 功能&#xff1a; vector容器与数组非常类似&#xff0c;也称单端数组&#xff08;动态数组&#xff09; vector容器的内部结构图示&#xff1a; vector与普通数组之间的区别&#xff1a; vector可以动态扩展&#xff0c;而普通数组是静态空间&#xff0c…
最新文章