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确实已经消失:

相关推荐
lqj_本人5 小时前
鸿蒙OS&UniApp滑动锁屏实战:打造流畅优雅的移动端解锁体验#三方框架 #Uniapp
华为·uni-app·harmonyos
说私域7 小时前
定制开发开源AI智能名片S2B2C商城小程序:数字营销时代的话语权重构
人工智能·小程序·开源·零售
Simon—欧阳9 小时前
微信小程序真机调试时如何实现与本地开发环境服务器交互
服务器·微信小程序·小程序
说私域9 小时前
基于开源AI大模型AI智能名片S2B2C商城小程序源码的私域流量运营与内容定位策略研究
人工智能·小程序·开源·产品运营·流量运营·零售
偷光9 小时前
现代 CSS 高阶技巧:实现平滑内凹圆角的工程化实践
前端·css·小程序
白柚Y10 小时前
小程序跳转H5或者其他小程序
前端·小程序
说私域12 小时前
基于开源AI大模型AI智能名片S2B2C商城小程序源码的销售环节数字化实现路径研究
人工智能·小程序·开源·零售
LYP_032014 小时前
uniapp 实战demo
前端·javascript·uni-app
moxiaoran575318 小时前
uni-app学习笔记十六-vue3页面生命周期(三)
笔记·学习·uni-app
lqj_本人20 小时前
鸿蒙OS&UniApp自定义手势识别与操作控制实践#三方框架 #Uniapp
华为·uni-app·harmonyos