小程序：uniapp解决主包体积过大的问题

最新推荐文章于 2025-06-20 20:02:17 发布
最新推荐文章于 2025-06-20 20:02:17 发布
阅读量3k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： 小程序 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44747508/article/details/133890282
本文探讨了微信小程序如何通过在manifest.json中启用分包优化来减小体积，并介绍了在app.json中使用懒加载和按需注入组件以进一步提高性能的方法。

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

已经分包但还是体积过大

  1. 运行时勾选“运行时是否压缩代码”进行压缩
    在这里插入图片描述
  2. 在manifest.json配置（开启分包优化）
"mp-weixin" : {
	"optimization" : {
	    "subPackages" : true
	}
	//....
},
  1. 在app.json配置（设置组件按需注入）
{
  "lazyCodeLoading": "requiredComponents"
}
有衡
关注
UniApp开发的微信小程序主包过大问题及解决方案 编译小程序时Node-modules被打入主包
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
11-30 4554
通过以上几种方法，开发者可以有效地解决UniApp编译小程序时，依赖被打入主包的问题，减小主包体积，确保小程序能够顺利上线。具体方法的选择取决于项目的实际情况，开发者可以根据自己的需求灵活使用。移动components和到子包目录：适用于依赖只在某些子包中使用的情况。使用排除：适用于需要排除整个目录的情况。在中配置子包优化：适用于项目中有多个子包需要优化的情况。
uniapp -- 发布微信小程序主包大小超过2M限制解决思路
King Saj
11-21 1367
本文记录一下解决该问题的一个方向，通过分包优化、代码压缩、资源管理等多维度手段，跨越那2M的界限。创建分包目录结构：在项目的根目录下，为每个子包创建一个单独的文件夹，并在项目配置文件app.json中声明这些分包。配置页面路径：确保在app.json中的pages数组里正确引用了分包下的页面路径，使用//格式。优化资源加载：利用分包机制，将图片、音频等静态资源随所属功能一同放入对应子包，减少主包体积。删除冗余代码：定期审查代码库，移除未使用的变量、函数和组件，避免不必要的代码膨胀。
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
热门推荐
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
01-22 3万+
使用uniapp开发微信小程序时主包太大和vendor.js过大无法打包的问题 在uniapp开发小程序这一块，相信很多开发者都遇到过代码体积太大无法打包的问题，这时候就要优化小程序包大小。下面分享一下我的解决思路。希望能给大家一些帮助吧。
uni-app打包微信小程序主包超2M？这里有终极解决方案
luo123_123_123的博客
11-17 6618
在开发微信小程序时，我们经常会遇到一个问题：代码包体积过大，尤其是主包超过2M的限制，导致无法上传。首先，我们需要明确的是，在开发版中，我们可以通过调整开发者工具的设置来增加主包和分包的体积上限。然而，对于体验版和正式版来说，主包体积的限制仍然是2M。对于使用uni-app进行开发的开发者来说，还有一些额外的优化策略可以帮助我们减小主包的体积。通过合理的分包策略，我们可以将不常用的页面和功能放在分包中，从而减小主包的体积。文件中写公共CSS代码，因为这会导致所有页面都加载这些代码，从而增加主包的体积。
解决uni-app发布微信小程序主包大小限制为＜2M的问题
最新发布
mm5720181520的博客
06-20 930
微信小程序对于子包的大小是没有限制的，所以所有的业务逻辑都放在子包里面吧。
前端学习（2347）：创建新页面和配置
歌谣的博客
10-04 917
pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/message/message", "style" : { "navigationBarTitleText": "信息页", "navigationBarBackgroundColor": "#7FFF00", "h5":{ ..
uniapp 解决主包过大问题(vendor文件过大，使用了echart或其他类似的大型组件)，已解决
qq_63189148的博客
07-17 4859
可以看到有一个无依赖代码文件数，可以通过这个找到无用的依赖代码，下面的是我删除之后的，删除之前有一个1mb大小的无用依赖，然后还删除了一些无用的代码，零零散散减少了几十kbok，现在大小来到3mb，还是不符合需求。分页之前，我们需要明确，哪些页面应该合在一起，尽可能使，分包内的页面只在自己包内使用组件，减少主包的组件，这样能够减少主包大小，而且最重要的一点，可以看到分包效果十分显著，主要的内存就是由echart依赖导致的，因此以后我们开发的时候一定要注意分包问题，以及大型依赖放入同一分包下的重要性。
uniapp打包微信小程序主包过大问题
jieyucx的博客
04-19 4949
一般情况下配置这三个地方就可以解决问题了，如果打包的还是太大，可以参考。在用uniapp打包微信小程序时提示文件超过了2M不让上传，主包中的。太大1.7M有的甚至更大，
使用uniapp开发微信小程序使用uni_modules导致主包文件过大，无法发布的解决方法
陈先生的博客
11-18 5182
在使用uniapp开发微信小程序时候，过多的引入uni_modules的组件库，会导致主包文件过大，导致无法上传微信小程序，主包要求大小不超过1.5MB.分包大小每个不能超过2M。解决方法：分包。
Uniapp开发微信小程序，主包大小过大问题解决
caisexi的博客
09-04 697
3、HBuilder X开发工具配置，进行压缩代码。4、微信开发者工具配置，进行压缩代码。2、静态图片进行CDN。1、功能模块分包开发。
小程序：uniapp解决 vendor.js 体积过大的问题
snow的博客
06-24 3万+
一、环境介绍uniapp + HBuilderX二、问题描述真机调试，提示包提交过大，不能生成二维码，后续上传代码更是不可能了 三、代码包体积优化代码包体积优化 | 微信开放文档3.1、图片等静态资源放到服务器上，小程序引用服务器文件地址（图片较多的话会节约大量的体积）。 项目仅保留了底部导航的icon。3.2、根据业务类型进行分包处理（分包后单一包的体积迅速减少）：使用分包 | 微信开放文档 3.3、运行时压缩代码 （体积减少很多，测试项目减少400多kb） 压缩前： 这几步骤下来代码体积到了：小于2
uniapp: 微信小程序包体积超过2M的优化方法（主包从2.7M优化到1.5M以内）
q1003675852的博客
11-15 9131
本文主要介绍uniapp: 微信小程序包体积超过2M的优化方法
uniapp优化之路(一) 如何在 uniapp+vue3+vite 项目中查看打包后的依赖大小
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
05-03 308
在进行 uniapp、Vue3 和 Vite 开发时，随着项目的增大，我们可能会遇到打包后的文件过大或者依赖过重的问题。：通过这个插件，可以生成打包报告，帮助你可视化每个模块的体积和依赖关系，方便我们定位项目中体积较大的依赖。，打包完成后会自动打开浏览器，显示一个依赖可视化的报告，帮助你查看项目中各个模块的大小。插件，用于自动化的 CSS 提取，避免了多余的 CSS 导入。，以便在打包时查看依赖的大小，帮助你做出优化。来可视化打包后的依赖大小，从而找出瓶颈。接下来，我们修改项目中的。，以及其他的依赖包。
使用uniapp在打包微信小程序时主包和vendor.js过大（uniCloud的插件分包）
GRC__cheng的博客
01-04 2万+
这些页面默认都会在主包里，因为uni_modules是主包，所以该目录下的uni-id-pages和uni-im页面也会打包到主包里（主包里面的vendor.js会打包所有主包里面的页面与插件的js文件），所以导致了主包里面的vendor.js在分包打包后依旧过大。但是如果你的微信小程序在uni_modles下引入了非常多的uni插件，比如说：uni-id-pages,uni-im,uSearch,uni-pay等uni全家桶。通过vue语法，将所有的组件导入到所有的页面（为了方便）
使用uni-app开发——文件包体积过大无法上传和预览问题的处理方式
qq_38003956的博客
11-08 3777
uni-app开发包体积过大导致无法上传和预览的解决办法
uniapp 引入了uview-ui后，打包错误，主包过大解决方案
qq_41897021的博客
10-22 2823
微信小程序上传代码主包过大
uni-app 发行到微信小程序,主包过大解决方案
BlackjunPJH的博客
04-24 1389
正常uni-app项目发行到微信小程序,发现包过大,基本已经没法从代码层面修改内容了,今天这里介绍一些,不用大批量修改源码的情况下,减少包大小的方式官方默认这包不能超过2M分包不能超过30M。
小程序uni-app(vue3)主包体积优化方案(SDK过大问题)
jaqi.csdn
10-27 1965
以腾讯im和lottie库为例，分享了两种因为sdk，导致主包超过2mb无法发布的问题。 方案一：业务代码和SDK都在分包、方案二：业务代码在主包，SDK在分包
解决uniapp打包过大问题的实用方法
似码非码的博客
10-09 4731
开发者在使用uniapp开发跨平台应用时，可能会遇到打包过大的问题。过大的应用包不仅会增加用户下载和安装的成本，还会影响应用的性能和加载速度。本篇博客将介绍一些解决uniapp打包过大问题的实用方法，帮助开发者优化应用的大小和性能。
小程序主包体积过大
03-08
### 小程序主包体积优化策略 #### 一、资源文件压缩与精简 为了有效减少小程序主包的大小，可以通过对图片和其他静态资源进行无损或有损压缩来实现。对于图像资源，采用 WebP 或 JPEG XR 等高效编码格式能够显著降低文件尺寸而不明显影响视觉质量[^1]。 #### 二、代码分割与懒加载机制 通过合理规划应用结构，利用模块化开发模式将不常用的功能逻辑拆分为独立的小型库，在实际调用时再动态加载进来，从而避免一次性打包过多不必要的 JavaScript 文件进入初始页面中[^2]。 #### 三、移除冗余依赖项 定期审查项目中的第三方库以及插件列表，去除那些不再使用的组件和服务接口；同时考虑替换一些重量级框架为更轻量的选择，或者直接使用原生 API 实现相同功能以达到瘦身效果[^3]。 ```javascript // 移除未使用的 npm 包 npm uninstall unused-package-name --save ``` #### 四、构建工具配置调整 借助 webpack 等前端工程化工具提供的 tree-shaking 功能自动清除死码，并开启 Gzip/Br 压缩选项进一步缩小最终产出物的整体规模。此外还可以启用 scope hoisting 技术使得编译后的 JS 更紧凑[^4]。 ```json { "optimization": { "minimize": true, "splitChunks": { "chunks": "all" } }, "plugins": [ new CompressionWebpackPlugin() ] } ``` #### 五、缓存策略优化 适当设置 HTTP 缓存头信息（如 Cache-Control），让浏览器端能更好地存储已下载过的静态资源副本，当用户再次访问同一页面时不需重新请求服务器获取相同的资料，间接减少了初次加载所需传输的数据总量[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值