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

相关推荐
先知demons1 小时前
uniapp开发微信小程序笔记2-开发静态页面(新建页面、内置组件、设置编译模式、样式、SCSS的使用)
笔记·微信小程序·uni-app
baozhengw2 小时前
uni-app快速入门(三)--UniApp生命周期
uni-app
破z晓2 小时前
uniapp 设置form表单以及验证密码
前端·javascript·uni-app
说私域4 小时前
社群在 2+1 链动模式 S2B2C 商城小程序社交新零售运营中的价值与应用
大数据·小程序·零售
Mr.Liu64 小时前
小程序20-样式:自适应尺寸单位 rpx
前端·微信小程序·小程序
Mr.Liu64 小时前
小程序19-微信小程序的样式和组件介绍
前端·微信小程序·小程序
说私域4 小时前
营销手段的变革:开源 AI 智能名片与 S2B2C 商城小程序在新趋势下的机遇与挑战
人工智能·小程序
rising_chain9 小时前
Uniapp 引入 Android aar 包 和 Android 离线打包
android·uni-app·uniapp 离线打包
多客软件佳佳10 小时前
2024游戏陪玩app源码的功能介绍/线上陪玩交友上线即可运营软件平台源码搭建流程
游戏·小程序·前端框架·uni-app·php·交友