uni-app小程序项目压缩vendor.js压缩主包大小

最新推荐文章于 2025-07-02 22:34:58 发布
最新推荐文章于 2025-07-02 22:34:58 发布
阅读量1.8k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
文章标签： uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/usernotdefined/article/details/126543861
本文介绍了一系列极致压缩技巧，包括图片压缩、资源分包、云存储利用等，帮助减少项目体积，提高加载速度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

压缩大法

注意：这里给的建议是全都用上，极致压缩。

  1. 压缩每一张图片
  2. 分包，将静态资源放置在分包内
  3. 在manifest.json中配置

在这里插入图片描述

  1. 命令行加压缩命令

在这里插入图片描述

  1. 将静态资源上云存储，避免保存在项目占用空间
  2. 开发者工具中的压缩全部开启

效果

压缩前
在这里插入图片描述
压缩后
在这里插入图片描述
已经可以预览了。

uni-app 项目打包的微信小程序
走向CTO的路上...
05-28 762
通过 uni-app 的统一组件和 API 体系，以及强大的编译器，开发者可以编写一套代码库，然后通过简单的构建命令，将其转换为适用于不同平台的原生代码或特定平台的代码（如微信小程序的 WXML、WXSS、JS、JSON）。这极大地提高了开发效率，降低了多端开发的门槛和成本。uni-app 是一个使用 Vue.js 语法开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信、支付宝、百度、字节跳动、QQ、快手、钉钉、淘宝）、快应用等多个平台。
uniapp - 热更新报错 Cannot read property ‘call‘ of undefined，uni-app小程序|uniapp安卓苹果app热更新时出现报错详细解决教程（完美）
高级前端工程师
04-08 4667
uni-app，安卓app，苹果系统app，微信小程序，支付宝小程序，报错解决方法，热更新报错，Cannot read property ‘call‘ of undefined，如何解决。在uniApp安卓苹果app|支付宝/微信小程序热更新时控制台报错：Cannot read property ‘call‘ of undefined并且页面可能无法显示、白屏等，很奇怪的问题。
小程序：uniapp解决 vendor.js 体积过大的问题
snow的博客
06-24 3万+
一、环境介绍uniapp + HBuilderX二、问题描述真机调试，提示包提交过大，不能生成二维码，后续上传代码更是不可能了 三、代码包体积优化代码包体积优化 | 微信开放文档3.1、图片等静态资源放到服务器上，小程序引用服务器文件地址（图片较多的话会节约大量的体积）。 项目仅保留了底部导航的icon。3.2、根据业务类型进行分包处理（分包后单一包的体积迅速减少）：使用分包 | 微信开放文档 3.3、运行时压缩代码 （体积减少很多，测试项目减少400多kb） 压缩前： 这几步骤下来代码体积到了：小于2
解决uniapp小程序打包vendor.js过大的问题，有哪些有效方法？
最新发布
4G/5G随身WiFi专业DIY改装
07-02 1206
UniApp开发中vendor.js过大的优化方案包括：按需引入第三方库（使用ES模块或Webpack的externals）、代码分割（SplitChunks配置）、移除无用代码（Tree Shaking）、压缩代码资源。高级技巧含动态导入、自定义构建配置、使用HBuilderX智能编译。验证方法包括打包分析工具和检查依赖版本。极端情况下可分离SDK或使用云函数。优化后体积可减少30%-50%，需注意兼容性和维护成本平衡。建议定期监控打包结果。
uniapp开发小程序vendor.js 过大
weixin_45561965的博客
06-10 926
有遇到这个问题的伙伴可以试一下~到这就可以解决这个问题了。
uni项目编译到小程序vendor.js文件压缩
weixin_48156531的博客
03-05 1699
相信刚接触uniapp写微信小程序的同学应该都遇到过这种情况，就是编译到微信小程序之后，vendor.js文件过大，大到2～3M，寻求官方文档给出的解决方案：uni官方解决vendor.js文件过大问题 这是个人感觉最有效的方法 这是我进行操作后的vendor.js的大小 ...
uniapp小程序过大，uniapp小程序压缩
weixin_45811884的博客
04-16 3438
[...代码]
uniapp开发的微信小程序进行代码质量控制，分包+压缩js+组件按需注入等
11-24 2355
JS文件压缩：在工具「详情」-「本地设置」中开启「上传代码时自动压缩脚本文件」的设置。代码包：组件 > 启用组件按需注入解决办法。
使用GZip对npm run build打包的vendor.js文件进行压缩
han_xiao_xiao的博客
07-08 509
如果样式不识别，那么就不压缩css文件了。这个功能需要后端开启gzip，可以识别这类文件。可以看到1.2M的vendors文件压缩到了295k，网页运行速度得到了提升，3。
记一次uniapp 打包发布到微信平台，vendor.js文件太大的优化历程
ALiMaMaYang的博客
01-05 7713
提示：大家用uniapp做项目的初期,一定首先考虑分包问题,要不然后期会麻烦死诶…好死不死,我接手了一个别的团队写的项目,他们在项目初期,并没有充分考虑分包的问题,而是在做的过程中,发现主包放不下了,才开始分包,然而这个时候,再开始分包,就麻烦多了。提示：以下是我改别人项目的历程,差点熬死给大家的建议和提示:1.大家用uniapp做项目的初期,一定首先考虑分包问题,要不然后期会麻烦死2.主包除了tab的这些类似必须的页面,其他统统放在分包3.在依赖第三方框架的时候,慎重选择,不要依赖体积太大的。
小程序代码包压缩策略 & 方案
03-29
其中很重要的一点得益于小程序的轻量级特性，每个小程序最多不超过2MB，招之即来挥之即去，相比于几十上百兆的APP，用户进入小程序，或者说，小程序获取新用户，的成本大大降低。 但与之相应的，是开发资源的限制。...
微信小程序压缩库zlib.js
07-17
微信小程序的压缩库--zlib.js，用法跟JS库的用法相同，我是根据JS库修改过来的，亲自测试可用
uni-app 微信小程序vendor.js 过大的处理方式和分包优化
阿里巴啦的博客
11-15 1万+
小程序工具提示vendor.js过大，已经跳过es6向es5转换。这个转换问题本身不用理会，因为vendor.js已经是es5的了。 HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码 cli创建的项目可以在package.json中添加参数–minimize， 示例：“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue...
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
热门推荐
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
01-22 3万+
使用uniapp开发微信小程序时主包太大和vendor.js过大无法打包的问题 在uniapp开发小程序这一块，相信很多开发者都遇到过代码体积太大无法打包的问题，这时候就要优化小程序包大小。下面分享一下我的解决思路。希望能给大家一些帮助吧。
uni-app 解决打包微信小程序vendor.js过大
weixin_51070343的博客
05-14 2687
希望这篇博客能帮助到正在使用uni-app开发微信小程序并遇到相似问题的开发者。如果你有任何问题或者更好的解决方案，欢迎在评论区交流分享！
uniapp不用分包！！6M以下的代码量直接压缩代码就行，不用分包那么麻烦！！
zsq199771的博客
12-30 2305
好了继刚说的分包功能 我发现uniapp有个运行压缩功能！ 我6M的代码量，压缩到小程序代码后为1987K < 2M哈哈哈哈 好了你们6m以下的代码不用去愁分包了，我也撤销分包操作了哈哈哈哈
uniApp开发微信小程序减少包大小
m0_57547956的博客
11-24 2409
小程序规定每个包不能大于2m超出会导致无法真机调试和打包发布。 说下我目前在用的几个优化的方案 1.uniApp运行时勾选小程序运行压缩代码 (必须) 2.使用分包 具体参考uniApp分包文档 将不必要放在主包内的组件全部分包 3.使用一些js库时注意大小 例如 moment可以用dayjs来替换 更轻量功能也基本一致 4.所有主包内的图片资源 或所有项目图片静态资源最好放在 服务器/CDN使用网络资源，尽量避免放在项目中，特别是大图。 这样一轮调试后，在真机调试...
关于微信小程序打包文件vendor.js超过500k的压缩方案
艾瑞巴蒂康忙北鼻噗求汉卓的博客
11-21 5693
关于微信小程序打包文件vendor.js超过500k的压缩方案 因为是开发环境,所以没进行UglifyJs压缩,所以解决的方法来了,引入UglifyJs插件 修改build目录下 的webpack.dev.conf.js配置文件，前面添加插件的引入， var UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 在插件列表加上一句话,就可将...
uniapp小程序解压压缩包 (使用jszip)
ybeanyeah的博客
10-14 6654
uniapp微信小程序解压压缩包文件 解决:微信自带方法解压压缩包出现中文乱码问题 描述: 微信提供的unzip解压压缩包函数(18年到21年了, 还没改这个问题…) 出现中文乱码问题 , 遂改用jszip解压文件 在此记录一下本人小程序解压压缩包过程及方法 方案1 无所谓解压中文文件乱码问题 直接使用微信提供 unzip 方法 + 递归读取目录文件 方案2 ( 使用jszip ) 可恶啊该死的中文乱码 解压微信聊天记录中的压缩文件 方案3 ( 使用jszip ) 解压本地的压缩文件 ...
小程序vendor.js占主包太大
03-26
### 减少小程序中 `vendor.js` 文件大小的方法 #### 方法一：配置 Webpack 的 optimization 属性 通过调整 Webpack 的配置来启用子包加载功能可以显著减少主包中的依赖项。具体来说，在项目的构建工具链中加入如下设置能够实现这一目标： ```json "optimization": { "splitChunks": { "chunks": "all" } } ``` 此方法利用了 Webpack 提供的代码分割能力，将公共模块提取到单独的文件中[^1]。 #### 方法二：使用分包机制 微信小程序支持分包加载的功能，允许开发者把应用划分成多个独立的小程序包。这样做的好处在于只有当用户访问特定页面时才会下载对应的分包内容，从而减少了初次启动所需的数据量。可以通过修改 `project.config.json` 或者直接定义 `pages` 和 `subpackages/subPack` 字段的方式开启该特性: ```json { "miniprogramRoot": "./dist/", "setting": { ... }, "subPackages": [ { "root": "packageA", "pages": ["index"] } ] } ``` 上述例子展示了如何创建名为 packageA 的子包，并指定它内部包含 index 页面[^2]。 #### 方法三：压缩资源文件 引入第三方插件如 CompressionWebpackPlugin 对静态资源进行 Gzip 压缩处理也是一种有效的手段。这一步骤通常是在 Vue CLI 中完成，只需编辑 vue.config.js 即可生效： ```javascript const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new CompressionWebpackPlugin({ filename: '[path][base].gz', algorithm: 'gzip', test: /\.js$/, threshold: 10240, minRatio: 0.8, deleteOriginalAssets: false, }), ], }, }; ``` 这段脚本会自动检测符合条件 (大于阈值且压缩率满足条件) 的 JavaScript 文件并生成相应的 .gz 版本[^3]。 综上所述，以上三种策略都可以帮助我们有效地控制住 uni-app 小程序最终产物里 vendor.js 所占比例过高问题；实际操作过程中可以根据具体情况选择适合自己的方案或者组合运用它们达到最佳效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值