uniapp: vite配置rollup-plugin-visualizer进行小程序依赖可视化分析减少vender.js大小

一、前言

在之前文章《uniapp: 微信小程序包体积超过2M的优化方法(主包从2.7M优化到1.5M以内)》中,提到了6种优化小程序包体积的方法,但并没有涉及如何分析common/vender.js这个文件的优化,而这个文件的大小通常情况下都比较大。

在《uniapp: 微信小程序包体积超过2M的优化方法(主包从2.7M优化到1.5M以内)》文章中提到分包优化的方法,其中有一个配置如下:

复制代码
"optimization" : {
    "subpackages" : true
}

这段配置是防止子包的组件和js文件会被打包到主包的vendor.js文件中而导致vendor.js文件过大。

但实际实践后发现,依然存在子包内引入的js被打包到vendor.js文件中。如何确定这个问题,就需要利用rollup-plugin-visualizer插件进行分析。

二、rollup-plugin-visualizer配置及使用

复制代码
// vite.config.js

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
	  plugins: [
			visualizer({open: true})
	  ]
	})

运行后:

可以发现子包subPages中引入的lodash依赖被打包到vender.js中。

至于为何hbuilderx(4.29)会如此,目前还不确定:

为了减少vender.js大小,就必须剔除lodash,所幸项目只用到个别方法,在替换上并不费劲。

最后看一下优化后的效果,lodash确实已经消失:

相关推荐
柚鸥ASO优化31 分钟前
抢占流量入口:小程序名称与关键词的优化指南
小程序
说私域43 分钟前
基于链动2+1模式S2B2C商城小程序的营销策略创新与品牌发展研究
小程序·产品运营·流量运营
qq_12498707531 小时前
基于Spring Boot的心理咨询预约微信小程序(源码+论文+部署+安装)
java·spring boot·后端·spring·微信小程序·小程序·毕业设计
说私域1 小时前
AI智能名片S2B2C商城小程序品牌诞生原因与发展历程分析
人工智能·小程序·流量运营
Front_Yue1 小时前
微信小程序实现实时噪声(分贝)检测技术方案详解
微信小程序·小程序
小小王app小程序开发1 小时前
招工小程序开发全解析:精准匹配+高并发支撑+合规风控
小程序
莫桐1 小时前
微信小程序-日常开发体验提升小巧思--持续更新
微信小程序·小程序
2501_9159090610 小时前
如何保护 iOS IPA 文件中资源与文件的安全,图片、JSON重命名
android·ios·小程序·uni-app·json·iphone·webview
2501_9159090617 小时前
原生与 H5 共存情况下的测试思路,混合开发 App 的实际测试场景
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者818 小时前
了解 Xcode 在 iOS 开发中的作用和功能有哪些
android·ios·小程序·https·uni-app·iphone·webview