使用uniapp在打包微信小程序时主包和vendor.js过大（uniCloud的插件分包）

最新推荐文章于 2025-10-20 22:58:06 发布
原创 最新推荐文章于 2025-10-20 22:58:06 发布 · 2.9w 阅读 · 71 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #javascript #uni-app

文章讲述了在微信小程序开发中遇到主包体积过大，尤其是vendor.js文件过大的问题，以及如何通过调整manifest.json的分包配置，特别是针对uni-app中引入的大量uni插件进行合理分包，以减小主包大小。同时，文章提到了在分包后需手动引入组件并避免全局注册，以防止vendor.js体积再次增大。通过这些方法，可以有效优化小程序的加载性能。

1.问题描述

正常的的微信小程序在编译后，主包应保持在2MB左右（限制最大2MB），其余的文件通过分包来进行加载

 但是有的情况下，微信小程序的主包能达到3MB，vendor.js会达到1.5MB

 2.问题解决

当你发现的你的微信vendor.js只有1个文件夹，且这个文件非常大时，首先需要检查manifest.json

在这个文件夹下的源码视图中，在这个文件下的mp-weixin节点有个optimization

 optimization下的subPackages节点时用来控制微信分包的，需要将此节点设为true

"optimization" : {
    "subPackages" : true
}

一般的微信小程序设置这个节点就能够解决

但是如果你的微信小程序在uni_modles下引入了非常多的uni插件，比如说：uni-id-pages,uni-im,uSearch,uni-pay等uni全家桶

这些页面默认都会在主包里，因为uni_modules是主包，所以该目录下的uni-id-pages和uni-im页面也会打包到主包里（主包里面的vendor.js会打包所有主包里面的页面与插件的js文件），所以导致了主包里面的vendor.js在分包打包后依旧过大

这时就需要我们把你项目中引用的插件也进行分包（uni-id-pages和uni-im引入时在uni_modules下）

在pagesjson中添加分包信息，将在主包中注册的插件的页面都移动到此分包中

 通过查找替换功能，将uni-id-pages等插件的路径由“uni_modules/uni-id-pages”替换为“subpackageuni/uni-id-pages”

不建议直接把uni_modules直接分包，因为其中可能包含其它组件，这些组件最好注册在主包中注册，因为子包不能引用子包的插件，所以插件如果在子包中，就只有子包中才能引用

 同理，将uni-id-pages等插件分包后，这些插件就不适用与uni-app的组件规则，就需要我们手动去引入

在uni-id-pages下有如下的组件，这些组件在经过分包之后，只能在子包内才能访问，而通过uniapp的组件引入是通过easycom组件规范来引入的，详细见如下链接：

组件使用的入门教程 | uni-app官网

 因此这些组件需要通过vue语法引入到页面（必须要在子包内引入，因为你如果把这些组件都通过注册全局组件来引入，那么到头来还是会增加vendor.js的大小，因为vendor.js会引入全局组件）

通过vue语法，将所有的组件导入到所有的页面（为了方便）

 每个页面都把这些组件复制一遍即可

 最后再进行分包你就会发现主包的vendor.js明显小了

 而由于把uni-id-pages和uni-im进行了分包，分包中的vendor.js明显变大（这样就把以前位于主包的vendor.js打包到了分包中）

 

 

 

uniapp打包字节小程序提示vendor.js过大，怎么进行优化?
欢迎来到瑆箫博客，专为程序员和编程爱好者打造的技术博客。我们分享编程语言趋势、开发工具、编程哲学、职业发展等，助你掌握新技术，优化技能，激发编程热情。
04-17 9381
此外，我们还可以通过使用tree shaking、按需引入等技术，对不必要的模块进行剔除，从而减小vendor.js的体积。同时，我们还可以使用uni-app的externals参数，将第三方库和框架从vendor.js中剔除，从而进一步减小vendor.js的体积。因此，我们需要进行优化。🌽 最后，我们需要注意的是，尽量避免在代码中直接引用第三方库和框架的全局变量或对象，而是通过import的方式引入，这样能够使tree shaking工具更好地识别出不需要的代码，从而减小vendor.js的体积。
UniApp开发的微信小程序主包过大问题及解决方案 编译小程序时Node-modules被打入主包
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
11-30 5421
通过以上几种方法，开发者可以有效地解决UniApp编译小程序时，依赖被打入主包的问题，减小主包体积，确保小程序能够顺利上线。具体方法的选择取决于项目的实际情况，开发者可以根据自己的需求灵活使用。移动components和到子包目录：适用于依赖只在某些子包中使用的情况。使用排除：适用于需要排除整个目录的情况。在中配置子包优化：适用于项目中有多个子包需要优化的情况。
解决uniapp编译后vendor.js文件过大（官方处理方案）
qq_34761385的博客
08-10 3万+
uni-app开发微信小程序，真机运行发布时工具提示vendor.js超过500KB，已经跳过es6向es5转换。通过资源管理器中的显示发现是vendor.js文件过大，有1M多。 在hbuilderx编译时不知你们是否有注意过这一段提示 ： 因为我们是运行模式，所以没有进行压缩代码，体积较大。理论上而言，如果要发布代码我们可以直接通过hbuilderx的 发行-》小程序-微信 即可。这样就不会出现体积过大无法打包的情况。 话又说回来，我们就喜欢在程序开发工具里发布代码，有时也遇到进行真机运..
解决uniapp编译成小程序主包过大的问题，vendor.js过大
qq_59870189的博客
10-20 268
编译包过大的常见原因包括UI库过大、静态资源过多和vendor.js体积过大。解决方法：1.使用单一UI库并按需引入；2.将非必要静态资源（如非tabbar图片）移至服务器；3.通过逐页排查定位导致vendor.js过大的具体页面和引入的大型JS库。这些措施可有效控制主包大小，确保顺利上传。
uniapp 微信小程序打包之后vendor.js 主包体积太大，解决办法，“subPackages“:true设置不生效
m0_71835253的博客
02-24 2695
设置完 "subPackages":true vendor.js 打包之后还是全部分到了主包里面，网上的方法有很多，找了半天。我的tabBar页面有 echarts 优化的空间有限， 如果后面新增页面只能分node_modules的包了。1. 通过发行 小程序打包 这样打包的体积是最小的，打包之后打开微信开发工具，然后再上传。2.node_modules里面的安装的包目前只会打包到 主包的vender.js中。现在是打包的时候，vendor.js 的内容全部打到了主包里面，
uniapp上传vendor.js代码包过大
cwb_2120的博客
05-19 1591
第二：很多时候vendor.js过大原因是子包的组件和js文件会被打包时，合并到了主包的vendor.js文件中。在HBuliderx —— manifest.json —— 源码视图 —— mp-weixin添加一下代码。第一：上传的时候尽量用发行上传，不要运行上传。对了，大家运行的时候尽量点击运行时压缩代码。
记一次uniapp 打包发布到微信平台，vendor.js文件太大的优化历程
ALiMaMaYang的博客
01-05 8480
提示：大家用uniapp做项目的初期,一定首先考虑分包问题,要不然后期会麻烦死诶…好死不死,我接手了一个别的团队写的项目,他们在项目初期,并没有充分考虑分包的问题,而是在做的过程中,发现主包放不下了,才开始分包,然而这个时候,再开始分包,就麻烦多了。提示：以下是我改别人项目的历程,差点熬死给大家的建议和提示:1.大家用uniapp做项目的初期,一定首先考虑分包问题,要不然后期会麻烦死2.主包除了tab的这些类似必须的页面,其他统统放在分包3.在依赖第三方框架的时候,慎重选择,不要依赖体积太大的。
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
热门推荐
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
01-22 4万+
使用uniapp开发微信小程序时主包太大和vendor.js过大无法打包的问题 在uniapp开发小程序这一块，相信很多开发者都遇到过代码体积太大无法打包的问题，这时候就要优化小程序包大小。下面分享一下我的解决思路。希望能给大家一些帮助吧。
uni-app 解决打包微信小程序vendor.js过大
weixin_51070343的博客
05-14 2932
希望这篇博客能帮助到正在使用uni-app开发微信小程序并遇到相似问题的开发者。如果你有任何问题或者更好的解决方案，欢迎在评论区交流分享！
uniapp打包微信小程序主包过大问题
jieyucx的博客
04-19 5360
一般情况下配置这三个地方就可以解决问题了，如果打包的还是太大，可以参考。在用uniapp打包微信小程序时提示文件超过了2M不让上传，主包中的。太大1.7M有的甚至更大，
解决vue打包后vendor.js文件过大问题
10-16
总结来说，解决Vue打包后vendor.js文件过大问题的关键在于减少被打包进vendor.js的库的数量，通过CDN引入、配置Webpack排除依赖、使用Vue插件以及利用懒加载等策略，可以有效提升项目的加载性能和用户体验。...
uniapp运行到微信小程序主包里面的vendor.js文件太大，除了tabbar页面其他全部分包，但是主包仍然很大如何解决
07-18
针对 UniApp 在微信小程序中主包 `vendor.js` 过大的问题，即使已经进行分包，但主包体积仍然较大的情况，可以通过优化分包策略来解决。 - **避免将 `uni_modules` 整体作为分包**：`uni_modules` 中的插件通常会被...
uniapp：解决微信小程序包体积超过2M的优化方案+详解分包问题，编译小程序体积大于2M不能上传和预览提示体积太大的处理教程，uniApp微信小程序主包过大问题如何解决（排查可疑点+分包+最小改动）
最新发布
高级前端工程师
10-20 4451
uniapp微信小程序开发，如何解决打包太大无法预览发布的问题，uniApp微信小程序包体积超过2M的优化方法，uni-app打包微信小程序主包超2M终极解决方案，使用uniapp开发微信小程序使用uni_modules导致主包文件过大，无法发布的解决方法，UniApp开发的微信小程序主包过大问题及解决方案 编译小程序时Node-modules被打入主包，小程序体积大于2M不能上传和预览，怎么处理，解决微信小程序主包太大问题，微信小程序中主包和分包过大，详解分包问题，uni-app 微信小程序发布时，主包超
【2025最新】uniapp 打包微信小程序体积超标？这 8 个优化技巧帮你瘦到 1M 内
weixin_43309426的博客
09-25 2071
Uniapp打包微信小程序体积超标的8个优化技巧：1）按需引入第三方依赖，替换重型库；2）压缩图片/字体，优先使用CDN；3）删除冗余代码，开启uniapp压缩配置；4）采用分包加载策略；5）选择轻量级组件库；6）设置缓存策略；7）关闭sourceMap等进阶优化；8）优化后严格检测体积和功能。核心思路是"删冗余、压资源、巧拆分"，通过针对性优化可将3M包压缩至1M内，解决微信2M基础包限制问题。
解决主包里面vendor.js文件过大问题
Leungsintin的博客
02-07 1950
是一个由Webpack等构建工具生成的JavaScript文件，它主要用于存放项目中引用的第三方库和框架的代码。这个文件的大小会根据项目中实际引用的库和框架的不同而有所差异。查阅了很多降低vendor.js体积的方法，最后我觉得比较快速和有效的方法分享给大家~~
uniapp开发小程序，即使使用了分包规则还是会导致主包vendor.js过大的解决方案
sjt1010的博客
02-15 3613
第一步：压缩运行 hbuilderx-运行-运行到小程序模拟器-勾选（运行时是否压缩代码） 第二步：在manifest.json文件中配置 "optimization": { "subPackages": true }, 基本上这两个搞定后就没问题了
解决uniapp小程序打包vendor.js过大的问题，有哪些有效方法？
4G/5G随身WiFi专业DIY改装
07-02 3350
UniApp开发中vendor.js过大的优化方案包括：按需引入第三方库（使用ES模块或Webpack的externals）、代码分割（SplitChunks配置）、移除无用代码（Tree Shaking）、压缩代码资源。高级技巧含动态导入、自定义构建配置、使用HBuilderX智能编译。验证方法包括打包分析工具和检查依赖版本。极端情况下可分离SDK或使用云函数。优化后体积可减少30%-50%，需注意兼容性和维护成本平衡。建议定期监控打包结果。
uviewplus 打包后太大小程序主包超过2
07-14
<think>我们面对的问题是：uViewPlus打包后小程序主包体积过大（超过2MB），需要优化方法。 根据引用内容，我们注意到uViewPlus是通过在项目中引入整个库的方式使用的，这可能导致打包体积过大。因此，优化的核心思路应该是减少最终打包文件中uViewPlus所占的体积。 常见的优化方法包括： 1. **按需引入**：只引入项目中实际使用的组件，而不是整个uViewPlus库。 2. **使用分包**：将uViewPlus库移到分包中，不占用主包体积。 3. **压缩代码和资源**：通过构建工具压缩代码和静态资源。 4. **使用小程序的分包异步化**：在需要时再加载uViewPlus组件。 具体到uViewPlus，我们可以尝试以下步骤： ### 1. 按需引入 在uViewPlus的文档中，通常提供了按需引入的方法。我们可以修改引入方式，只引入需要的组件。 例如，在`uview.js`中，我们原本可能是这样引入的： ```javascript import uviewPlus from "uview-plus" ``` 按需引入可以改为： ```javascript import { uButton, uIcon } from 'uview-plus' // 只引入需要的组件 ``` 然后在Vue中注册这些组件： ```javascript app.component('u-button', uButton) app.component('u-icon', uIcon) ``` 这样，打包时就只会包含这些组件的代码。 ### 2. 使用小程序分包 将uViewPlus移动到分包中： - 在项目根目录下创建分包目录，例如`packageA`。 - 将`node_modules/uview-plus`整个复制到分包目录下（或者使用npm构建到分包，但注意小程序不支持直接引用node_modules到分包，所以需要复制）。 - 修改`pages.json`，将分包的路径配置进去。 - 在需要使用uViewPlus的页面，通过相对路径引用分包中的组件。 但是，这种方法需要调整项目结构，并且要注意组件路径的修改。 ### 3. 压缩代码和资源 - 在微信开发者工具中，可以开启“上传代码时自动压缩”选项。 - 使用工具如Terser进行代码压缩，但小程序构建过程通常已经做了压缩。 - 压缩图片等静态资源。 ### 4. 使用分包异步化（仅当小程序基础库版本支持时） 分包异步化允许主包在需要时从分包中加载组件。我们可以将uViewPlus放在一个分包中，然后在主包中通过异步方式引用。 在`app.json`中配置分包： ```json { "subpackages": [ { "root": "packageA", "pages": [ // 这里不需要有页面，我们只是放组件 ], "plugins": { // 如果有插件，也可以配置 } } ], "preloadRule": { // 可以配置预加载规则 } } ``` 然后在主包的页面中，如果需要使用uViewPlus的组件，可以使用`require.async`来异步加载： ```javascript Page({ onLoad() { require.async('packageA/uview-plus/components/u-button/u-button', (comp) => { // 使用comp }) } }) ``` 但是，这种方式需要手动处理每个组件的异步加载，并且修改使用方式，较为繁琐。 ### 5. 使用小程序的分包独立化 在`app.json`中配置分包为独立分包，这样独立分包中的内容不会被打入主包。 但是，独立分包不能依赖主包和其他分包，所以如果uViewPlus被多个分包使用，可能需要复制多份，或者放在一个非独立分包中。 ### 6. 检查uViewPlus的版本和构建配置 - 确保使用的是最新版本的uViewPlus，可能新版本已经优化了体积。 - 检查构建配置，例如在微信小程序中，可以在`project.config.json`中设置`miniprogramRoot`，并检查是否包含了不必要的文件。 根据引用内容，我们注意到在App.vue中引入了整个uViewPlus的样式： ```scss @import 'uview-plus/index.scss'; @import 'uview-plus/theme.scss'; ``` 如果uViewPlus支持按需引入样式，那么我们可以只引入需要的组件的样式。但通常样式文件是整体引入的，所以可以考虑删除未使用组件的样式（手动或通过工具）。 ### 7. 使用工具分析包体积 使用微信开发者工具中的“代码依赖分析”功能，查看主包中哪些文件体积较大，然后针对性地优化。 ### 8. 替换或精简组件 如果上述方法效果有限，可以考虑替换一些组件，比如使用小程序原生组件替代部分uViewPlus组件，或者自己实现一些简单的组件。 综上所述，最有效且常用的方法是按需引入和使用分包。 下面给出一个具体的优化步骤建议： **步骤1：按需引入组件** 修改`uview.js`文件，将全局引入改为按需引入。例如： ```javascript // 按需引入部分组件 import { uButton, uIcon } from 'uview-plus' export const $toast = (message) => { uni.$u.toast(message) } export default app => { app.provide('$toast', $toast) // 注册组件 app.component('u-button', uButton) app.component('u-icon', uIcon) // ... 其他组件 } ``` **步骤2：将uViewPlus放入分包** 在项目根目录下新建一个分包目录，比如`subpackage/uview`，然后将`node_modules/uview-plus`整个目录复制到`subpackage/uview`下。 修改引入路径，将原本从`uview-plus`的引入改为相对路径引入，例如： ```javascript // 修改按需引入的路径 import { uButton, uIcon } from '@/subpackage/uview/uview-plus' ``` 注意：这样修改后，需要确保所有使用uViewPlus组件的地方都通过这个分包路径引入，或者通过配置别名简化路径。 **步骤3：配置分包** 在`pages.json`中配置分包： ```json { "subPackages": [ { "root": "subpackage", "pages": [ // 如果分包内有页面，则在这里添加，如果没有，可以留空或者添加一个空页面 ] } ] } ``` 这样，`subpackage`目录下的内容会被打包到分包中，不占用主包体积。 **步骤4：检查并优化** 重新构建项目，查看主包体积是否减小。如果仍然较大，继续分析其他占用体积大的部分。 注意：按需引入和分包可能会带来一些开发上的不便，比如需要手动管理引入的组件，但这是优化体积的有效手段。 如果以上方法仍不能满足需求，可能需要考虑更换UI库或者深入优化其他部分的代码和资源。 由于具体项目情况不同，请根据实际情况调整优化方案。 相关问题： 1. 如何分析小程序主包体积过大的原因？ 2. 除了uViewPlus，还有哪些优化小程序主包体积的方法？ 3. 使用分包后，如何解决跨分包组件通信的问题？</think>针对 uViewPlus 打包后小程序主包体积过大的问题，以下是优化方案及实施步骤： ### 优化方案 1. **按需引入组件** 通过 `unplugin-vue-components` 插件自动按需加载组件，避免全量引入。 ```bash npm install unplugin-vue-components -D ``` ```javascript // vite.config.js import Components from 'unplugin-vue-components/vite' import { UviewPlusResolver } from 'unplugin-vue-components/resolvers' export default { plugins: [ Components({ resolvers: [UviewPlusResolver()] }) ] } ``` 2. **启用小程序分包** 将 uViewPlus 移至分包中，减少主包体积： ```json // pages.json { "subPackages": [ { "root": "subpackage", "pages": [ { "path": "uview-components", "style": { "navigationBarTitleText": "UI组件" } } ] } ] } ``` 将 `node_modules/uview-plus` 复制到 `subpackage/uview` 目录，引用路径改为 `@/subpackage/uview`。 3. **压缩静态资源** - **图片压缩**：使用 TinyPNG 或 `image-minimizer-webpack-plugin`。 - **代码压缩**：在构建命令中添加 `--minimize` 参数，启用 Terser 压缩。 4. **清理未使用样式** 在 `App.vue` 中仅引入必要样式： ```scss /* 只引入使用的组件样式 */ @import 'uview-plus/theme.scss'; @import 'uview-plus/components/u-button.scss'; @import 'uview-plus/components/u-icon.scss'; ``` 5. **启用小程序 CDN 资源** 将 uViewPlus 的静态资源（如字体、图片）上传至 CDN： ```scss /* 修改 uview-plus 主题变量 */ $u-base-font-url: 'https://cdn.example.com/fonts/'; ``` ### 验证优化效果 1. 执行构建命令查看主包体积： ```bash npm run build:mp-weixin ``` 2. 使用微信开发者工具 > "详情" > "代码依赖分析" 查看主包占比。 ### 注意事项 - **版本兼容性**：确保 uViewPlus 版本 ≥ 1.3.0（支持按需引入）。 - **分包限制**：分包大小需 ≤ 20MB（含主包总上限 20MB）[^1]。 - **缓存清理**：每次优化后删除 `dist` 目录重新构建。 > 通过上述组合策略，通常可减少主包体积 30%-60%。若仍未达标，建议审查其他第三方库或业务代码冗余。 [^1]: 微信小程序官方分包规范要求主包≤2MB，总包≤20MB。
评论 10
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值