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

相关推荐
郭wes代码16 分钟前
Cmd命令大全(万字详细版)
python·算法·小程序
web150850966413 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
计算机徐师兄11 小时前
基于TP5框架的家具购物小程序的设计与实现【附源码、文档】
小程序·php·家具购物小程序·家具购物微信小程序·家具购物
曲辒净11 小时前
微信小程序实现二维码海报保存分享功能
微信小程序·小程序
朽木成才13 小时前
小程序快速实现大模型聊天机器人
小程序·机器人
peachSoda713 小时前
随手记:小程序使用uni.createVideoContext视频无法触发播放
小程序
何极光13 小时前
uniapp小程序样式穿透
前端·小程序·uni-app
小墨&晓末14 小时前
【PythonGui实战】自动摇号小程序
python·算法·小程序·系统安全
User_undefined1 天前
uniapp Native.js 调用安卓arr原生service
android·javascript·uni-app
流氓也是种气质 _Cookie1 天前
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
ffmpeg·uni-app