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

相关推荐
尚学教辅学习资料34 分钟前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游
Evaporator Core44 分钟前
微信小程序数据绑定与事件处理:打造动态交互体验
微信小程序·小程序·交互
烂蜻蜓5 小时前
前端已死?什么是前端
开发语言·前端·javascript·vue.js·uni-app
家里有只小肥猫16 小时前
uniApp小程序保存canvas图片
前端·小程序·uni-app
低代码布道师16 小时前
性格测评小程序10生成报告
低代码·小程序
小徐_233316 小时前
从空白到交互:用Trae快速搭建uni-app AI对话小程序页面
前端·uni-app·trae
科技小E16 小时前
EasyRTC:基于WebRTC与P2P技术,开启智能硬件音视频交互的全新时代
网络·网络协议·小程序·webrtc·p2p·智能硬件·视频监控
乔冠宇18 小时前
微信小程序中将图片截图为正方形(自动居中)
微信小程序·小程序·typescript·uniapp
播播资源18 小时前
ChatGPT付费创作系统V3.1.3独立版 WEB端+H5端+小程序端 (DeepSeek高级通道+推理输出格式)安装教程
前端·ai·chatgpt·ai作画·小程序·deepseek·deepseek-v3
貂蝉空大19 小时前
uni-app开发安卓和ios app 真机调试
android·ios·uni-app