uniapp打包字节小程序提示vendor.js过大,怎么进行优化?

207 篇文章 8 订阅 ¥129.90 ¥299.90
33 篇文章 0 订阅
本文探讨了uni-app打包字节小程序时遇到vendor.js过大问题的优化策略。包括通过剔除不必要的依赖,配置subPackages和使用tree shaking、按需引入技术,以及利用cdn加速,使用externals参数,并避免全局变量引用,以减小vendor.js体积,提高小程序加载速度。
摘要由CSDN通过智能技术生成

🍉 首先,我们需要了解什么是vendor.js。它是由webpack生成的用于存放第三方库和框架代码的JS文件,大小会根据引用的库和框架不同而有所差异。但是,如果vendor.js过大,不仅会影响小程序的加载速度,还可能导致小程序无法上线。因此,我们需要进行优化。

🍇 第一种方法是剔除不必要的依赖。我们可以通过配置uni-app的pages.json文件中的subPackages参数,将不常用的页面和组件打包成一个子包,从而减小vendor.js的体积。此外,我们还可以通过使用tree shaking、按需引入等技术,对不必要的模块进行剔除,从而减小vendor.js的体积。

🍓 第二种方法是使用cdn加速。我们可以将第三方库和框架通过cdn引入,从而减小vendor.js的体积,加速小程序的加载速度。同时,我们还可以使用uni-app的externals参数,将第三方库和框架从vendor.js中剔除,从而进一步减小vendor.js的体积。

🌽 最后,我们需要注意的是,尽量避免在代码中直接引用第三方库和框架的全局变量或对象,而是通过import的方式引入,这样能够使tree shaking工具更好地识别出不需要的代码,从而减小vendor.js的体积。

微信小程序打包common/vendor.js是指将小程序中的通用代码、库文件、资源文件等集中打包成一个文件。 在微信小程序开发中,我们经常会使用到一些通用的代码或者库文件,例如一些第三方库、封装的工具类等。这些代码在不同的页面或组件之间都会被使用到,如果每个页面都单独引入这些代码,就会造成代码的冗余和重复加载,影响小程序的性能和加载速度。 为了解决这个问题,微信小程序提供了打包机制。通过将这些通用的代码集中打包成一个文件,可以减少重复的加载,并且在需要的地方引入这个打包文件即可。 common/vendor.js打包过程如下: 1. 在小程序项目根目录下找到app.json文件,找到其中的"pages"字段,将所有的页面路径都列出来。 2. 根据页面路径和页面文件的import语句,分析出所有被引入到页面中的通用代码和库文件。 3. 将这些通用代码和库文件统一打包成一个vendor.js文件。这个文件中包含了各个通用代码和库文件的源代码。 4. 在页面的json配置文件中,通过"usingComponents"字段或"dependencies"字段引入vendor.js文件。这样,每个页面在加载时都会自动引入这个打包好的通用代码文件。 通过打包common/vendor.js,可以减少小程序的文件数量和大小,提高小程序的性能和加载速度。同时,也方便了开发者对通用代码和库文件的维护和更新,统一管理更加方便。 总之,微信小程序打包common/vendor.js是为了减少代码冗余和提高性能,通过将通用代码和库文件集中打包成一个文件,优化小程序的加载和运行效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瑆箫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值