HbuilderX 项目打包文件过大问题优化

文章目录

  • HbuilderX 项目打包文件过大问题优化
    • 主要操作
    • 收效甚微,但又有那么点用的方法
    • 使用 gulp 压缩(最后一步)
        • 使用与配置
      • 网上找的 gulp 优化压缩配置
      • 还未尝试可能有用的方法
    • 尝试过程中看到的一些优质文章

HbuilderX 项目打包文件过大问题优化

此前写过的另一篇相关文章:uniapp 打包小程序体积优化思路、优先排查优化项参考-CSDN博客

  • 完全不用看了,已经整合到这篇里了

主要操作

配置开发者工具上传代码压缩

请添加图片描述


(HbuilderX)运行(R)-运行到小程序模拟器(M)-运行时是否压缩代码(C)

  • 调试的时候有用(有人说打包也有用,我感觉是玄学,不过勾上也不影响)
    • 不过要调试 js 代码建议还是取消勾选,不然可能看不懂要调试的代码

请添加图片描述


HbuilderX 的配置(manifest.json 源码视图,搜 mp-weixin)

/* 小程序特有相关 */
"mp-weixin" : {"appid" : "wxf137596082a7507b","setting" : {"urlCheck" : false,"minified" : true,"postcss" : false,"es6" : false},"lazyCodeLoading" : "requiredComponents","usingComponents" : true,"permission" : {},"optimization" : {"subPackages" : true}
},

图片等静态资源云化

  • 图片、视频、字体文件等放到服务器上,用链接的形式引入,避免被打包

使用分包

  1. 页面分包(非 tabbar 页面分包及其用到的组件)
    1. 一般 tabbar 页面是最常用页面,进入到小程序立马访问、切换的概率较大, 所以放主包,避免因为分包加载影响用户体验
  2. 组件分包(如用到的 uni 组件、uView 组件、自己写的组件)
    1. uView 配置按需引入

uni_modules 也采用分包

  • 虽然 uniapp 官方说了 uni_modules 会根据使用用到而决定是否要打包过滤,但分包前后还是有区别的,所以我估计此前是理解错了
  • 虽然会过滤没用到的,但用到了的也会打包到主包里去,就导致了主包偏大无法上传的问题,不是说放到 uni_modules 按需引用就不用管了
  • 将 uni_modules 里的部分组件分包后就小了一两百kb了
    • uni_modules组件分包(迁移)_姽式、的博客-CSDN博客
    • uni-app uni_modules 怎么打包到分包 - 我爱学习网 (5axxw.com)

各类第三方类库尽量使用按需引入的方式

  • echarts(定制化导出离线包引入/按需引入),echarts 5.X 全量引入和按需引入最终打包出的小程序测试包大小差了快30KB

删除 static 目录下的无用文件(经观察,不管用没用到都会被打包进去)



收效甚微,但又有那么点用的方法

删除无用组件、代码

  • 未用到的业务代码删除(页面文件、封装的组件、方法类、通用样式……)
    • 复用项目难免会有很多之前项目的组件、业务代码(推荐给自定义组件加上统一前缀,然后在 pages.json 里配置 easycom 自动按需引入,后续没用到的业务组件就不会自动打包了,也不需要手动删除;虽然我感觉没用到的组件打包时会被自动删除,但删了一堆文件确实打包体积有所减小,就没过多去分析具体情况)

无用 scss 文件内容删除(主包不单单是 vendor.js,vendor.js 找不到地方下手,可以考虑 scss 文件也减减体积)

  • 如 uni.scss
    • 注意事项 | uView - 多平台快速开发的UI框架
    • uni.scss中所写的一切内容,都会注入到每个声明了scss的文件中,这意味着,如果您的uni.scss如果有几百行,大小10k左右,那么这个10k都会被注入所有的 其他scss文件(页面)中,如果您的应用有50个页面,那么有可能因此导致整体的包体积多了50 * 10 = 500k的大小,这可能会导致小程序包太大而无法预览和发布, 所以,我们建议您只将scss变量相关的内容放到uni.scss中。
  • 如何解决引入uView-ui导致主包过大问题?:减少在uni.scss的样式,放入app.vue中。uni.scss的样式会导入uview每一个组件的scss中


使用 gulp 压缩(最后一步)

使用 gulp 对打包后的文件进行压缩

  • 压缩 js 和 json 文件的前后对比(以我压缩的项目来说:①总体积:2.73MB =>2.66MB;②主包:2.01MB => 1.95MB,主包减小了差不多 61.44KB

处理前后文件大小对比

微信开发者工具中代码依赖对比


使用与配置

①新建一个目录,在目录里新建下述两个文件(gulpfile.js、package.json)

②在目录下执行 npm i

  • 我的环境:node v14.18.0、npm 6.14.15

③HbuilderX 把项目打包出来,将其打包好的 mp-weixin 目录下所有文件拷到项目里去(直接放根目录的 src 里)

④终端执行 gulp,或者 npm run build

  • 好像运行完 VS Code 会卡死……但问题不大,打包了几次都没啥问题

⑤将根目录生成的 dist 目录里的文件拿去运行(至此 js、json 文件就已经压缩好了,dist 里是压缩后的完整项目代码)

⑥测试一下功能是否正常,若正常上传代码进行发布(希望你大小降到了可以发布的程度~

gulpfile.js

/** @FilePath     : /test-gulp-zip/gulpfile.js* @Author       : suwanbin* @Date         : 2023-11-18 17:13:09*/
// 基础库
const gulp = require('gulp')
const uglify = require('gulp-uglify')
// const uglifyCss = require('gulp-minify-css')
// const cleanCss = require('gulp-clean-css');
const jsonminify = require('gulp-jsonminify');
// 文件重命名
const rename = require('gulp-rename')
// 清空文件夹
const clean = require('gulp-clean')// 删除文件夹
gulp.task('clean', function () {return gulp// read:是否读取文件,true 读取, false 不读取,加快程序// allowEmpty:允许文件夹为空或不存在,要不然会报错.src('./dist/', { read: false, allowEmpty: true }).pipe(clean());
})// 打包 JS 任务
gulp.task('zipjs', function () {return gulp.src('./src/**/*.js')               // 定位需要压缩的文件// .pipe(babel({                // ES6 转 ES5,看需求而定//   presets: ['@babel/env']// })).pipe(uglify())                 // 文件压缩.pipe(gulp.dest('./dist/'))     // 输出
})// // 打包 CSS 任务
// gulp.task('zipcss', function () {
//   return gulp
//     .src(['./src/**/*.css', './src/**/*.wxss'])               // 定位需要压缩的文件
//     .pipe(cleanCss())                 // 文件压缩
//     .pipe(uglifyCss())                 // 文件压缩
//     .pipe(gulp.dest('./dist/'))     // 输出
// })// 打包 JSON 任务
gulp.task('zipjson', function () {return gulp.src('./src/**/*.json')               // 定位需要压缩的文件.pipe(jsonminify())                 // 文件压缩.pipe(gulp.dest('./dist/'))     // 输出
})// 不推荐压缩 HTML、WXML 网上说可能会有问题// 发布文件移动
gulp.task('move', function () {return gulp.src('./src/**/*.*').pipe(gulp.dest('./dist/'))
})// 配置默认任务
// module.exports.default = gulp.series('clean', 'zipjs')
// gulp.task('default', gulp.series('clean', 'zipjs', 'zipcss', 'zipjson', 'move'))
gulp.task('default', gulp.series('clean', 'zipjs', 'zipjson', 'move'))

package.json

{"name": "gulp-zip-tools","version": "1.0.0","description": "gulp 压缩工具,临时压缩用","main": "gulpfile.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "gulp"},"author": "suwanbin","license": "ISC","devDependencies": {"@babel/core": "^7.23.3","@babel/preset-env": "^7.23.3","gulp": "^4.0.2","gulp-babel": "^8.0.0","gulp-clean": "^0.4.0","gulp-clean-css": "^4.3.0","gulp-jsonminify": "^1.1.0","gulp-minify-css": "^1.2.4","gulp-rename": "^2.0.0","gulp-uglify": "^3.0.2"}
}

优质文章:使用gulp打包js/scss/less/font文件 - Elwin0204 - 博客园 (cnblogs.com)

  • 可以用来了解 gulp,我感觉写的挺好的

网上找的 gulp 优化压缩配置

抛砖引玉,留给想要跟进一步与优化的朋友去探索

使用网友开源的压缩工具:web-dist: 传统模式开发的web站点 进行整站所有文件压缩及混淆处理 (gitee.com)【荐】

  • 好像某些情况下比我自己写这个压缩的小(虽然有时候会大一点)

使用gulp解决小程序代码包过大问题_gulp打包前端代码,修改文件支持最大容量_寂寞花如雪的博客-CSDN博客

  • 本地目录的是基于这个文章去弄的,装依赖有些问题,解决到能跑了
  • 结果打包出来的还没有我前文 只压缩 js 和 json 的小……

微信小程序——gulp处理文件_mb5fdcae83766b7的技术博客_51CTO博客

  • gulp 3.9.1 版本,暂不知道需要对应什么版本的 node,我本地 14.18.0 的不行

还未尝试可能有用的方法

HbuilderX 项目转 cli 项目

  • uni-app HBuilderX项目转为cli项目及踩坑记录

  • 记一次uni-app 小程序打包因主包太大的优化过程 - 简书 (jianshu.com)

    • 用 glup 打包

解决 vue2 + vant2 打包文件(vendor.js、app.css)过大问题_vant 打包-CSDN博客

  • ↑ 将组件库从主包里去掉,用 cdn 引入

尝试过程中看到的一些优质文章

感谢各位网友的分享~

uni-app 打包h5 同类等vender 过大体积处理 - 简书 (jianshu.com)

记一次uni-app 小程序打包因主包太大的优化过程 - 简书 (jianshu.com)

解决uni-app编译后vendor.js文件过大 - DCloud问答

uniapp-打包小程序 用分包打包 在分包中vendor.js太大 - DCloud问答

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/204852.html

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

相关文章

CSS特效020:涌动的弹簧效果

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧,主要包含CSS布局,CSS特效,CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点,CSS特效主要是一些动画示例,CSS花边是描述了一些CSS…

计算机基础知识60

MySQL分组 # 概念:分组是按照某个指定的条件将单个单个的个体分成一个个整体 # MySQL分组的关键字:group by # 分组一般配合聚合函数使用: sum max min avg count 基本的语法格式: group by 字段名 [having 条件表达式] # 单独使用 group by关…

直播场景视频和特效解决方案

直播已经成为企业与消费者互动的重要方式,如何提供优质的直播内容,提升直播效果,以及实现直播内容的商业化转化,一直是企业面临的重要挑战。为此,美摄科技提供了一套全面的直播场景解决方案,帮助企业解决这…

微服务知识大杂烩

1.什么是微服务? 微服务(Microservices)是一种软件架构风格,将一个大型应用程序划分为一组小型、自治且松耦合的服务。每个微服务负责执行特定的业务功能,并通过轻量级通信机制(如HTTP)相互协作。每个微服务可以独立开发、部署和扩展,使得应用程序更加灵活、可伸缩和可…

java开发之个微群聊管理

简要描述: 群管理操作 请求URL: http://域名/operateChatRoom 请求方式: POST 请求头Headers: Content-Type:application/jsonAuthorization:login接口返回 参数: 参数名必选类型说明w…

【算法刷题】Day8

文章目录 202. 快乐数解法: 11. 盛最多水的容器解法: 202. 快乐数 原题链接 拿到题,我们先看题干 把一个整数替换为每个位置上的数字平方和,有两种情况: 重复这个过程始终不到 1(无限死循环)结…

P27 C++this 关键字

目录 前言 01 this关键字的引入 02 this关键字 前言 本章的主题是 C 中的 this 关键字。 以前第一次学qt的时候就遇到了this关键字,那时候还不是很会C,所以有点懵,现在我们就来讲解以下C中的this关键字 C 中有一个关键字 this&#xff0…

考过了PMP,面试的时候应该怎么办?

近期喜番在后台收到了很多同学们的私信,表示自己已经过了8月份的PMP考试,开始着手往项目管理岗位转型,但是对于项目管理岗位的面试却一筹莫展。放轻松,大家的需求喜番都了解了,喜番给大家总结了一些项目经理在面试的时…

漏电保护器工作原理

漏电保护器 漏电保护器是低压线路中最常用的保护器之一,简称漏保,又称漏电开关或漏电断路器。漏电保护器除了具有空开的所有保护功能外,还具备漏电保护功能。 需要了解 一根通电导线可以产生磁场,磁场与电流方向遵循右手螺旋关…

【深度学习】学习率及多种选择策略

学习率是最影响性能的超参数之一,如果我们只能调整一个超参数,那么最好的选择就是它。相比于其它超参数学习率以一种更加复杂的方式控制着模型的有效容量,当学习率最优时,模型的有效容量最大。本文从手动选择学习率到使用预热机制…

深入理解OS--硬件高速缓存,缓存一致性,存储设备

存储技术 1.SRAM,DRAM 静态:更快,用作高速缓存存储器。处理器高速缓存采用SRAM。 动态:用作主存及图形系统的帧缓冲区。内存采用DRAM。 2.内存 2.1.内存数据访问示例 设备控制器存在缓存。设备芯片自身存在缓存。 2.2.采用并行…

【算法刷题】Day7

文章目录 283. 移动零1089. 复写零 283. 移动零 原题链接 看到题目,首先看一下题干的要求,是在原数组内进行操作,平切保持非零元素的相对顺序 这个时候我们看到了示例一: [ 0, 1, 0, 3,12 ] 这个时候输出成为了 [ 1, 3, 12, 0, …

【图论】重庆大学图论与应用课程期末复习资料(私人复习资料)

考试章节范围 第一章:1.1、1.2、1.3 填空 顶点集和边集都有限的图,称为有限图只有一个顶点的图,称为平凡图边集为空的图,称为空图顶点数为n的图,称为n阶图连接两个相同顶点的边的条数称为边的重数;重数大…

k8s安装步骤

环境: 操作系统:win10 虚拟机:VMware linux发行版:CentOS7.9 CentOS镜像:CentOS-7-x86_64-DVD-2009 master和node节点通信的ip(master): 192.168.29.164 0.检查配置 本次搭建的集群共三个节点,…

C语言基础程序设计题

1.个人所得税计算 应纳税款的计算公式如下&#xff1a;收入<&#xff1d;1000元部分税率为0&#xff05;&#xff0c;2000元>&#xff1d;收入>1000元的部分税率为5&#xff05;&#xff0c;3000元>&#xff1d;收入>2000元的部分税率为10&#xff05;&#xf…

【开源】基于Vue和SpringBoot的个人健康管理系统

项目编号&#xff1a; S 040 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S040&#xff0c;文末获取源码。} 项目编号&#xff1a;S040&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 健康档案模块2.2 体检档案模块2.3 健…

Edit And Resend测试接口工具(浏览器上的Postman)

优点 可以不用设置Cookie或者Token&#xff0c;只设置参数进行重发接口测试API 使用Microsoft Rdge浏览器 F12——然后点击网络——在页面点击发起请求——然后选择要重发的请求右键选择Edit And Resend——在网络控制台设置自己要设置的参数去测试自己写的功能

qt实现一个安卓测试小工具

qt实现一个安卓测试小工具 最终效果&#xff1a;目录结构源码gui.py 主要是按钮&#xff0c;文本控制代码main.py 主要是逻辑代码gui.spec 是打包使用的adb.ui 打包为exe 最终效果&#xff1a; 目录结构 上面2个是打包的生成的不用管 源码 gui.py 主要是按钮&#xff0c;文…

第二十章总结

一.线程简介 二.创建线程 1.继承Thread类 Thread类中常用的两个构造方法如下&#xff1a; public Thread():创建一个新的线程对象。 public Thread(String threadName):创建一个名称为threadName的线程对象。 继承Thread类创建一个新的线程的语法如下&#xff1a; p…