当前位置: 首页 > article >正文

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

在这里插入图片描述


http://www.kler.cn/a/398441.html

相关文章:

  • Java 动态代理初步
  • 有序数组的平方(leetcode 977)
  • SpringBoot如何集成WebSocket
  • day-83 最少翻转次数使二进制矩阵回文 II
  • Vue 3 中的 ref 完全指南
  • 深度学习中的Pixel Shuffle和Pixel Unshuffle:图像超分辨率的秘密武器
  • 华为USG5500防火墙配置NAT
  • 【网络安全 | 漏洞挖掘】通过密码重置污染实现账户接管
  • 《TCP/IP网络编程》学习笔记 | Chapter 13:多种 I/O 函数
  • git的常用用法(最简精华版)
  • 【软考】系统架构设计师-计算机系统基础(4):计算机网络
  • 任意文件下载漏洞
  • 基于Jmeter的分布式压测环境搭建及简单压测实践
  • WSL--无需安装虚拟机和docker可以直接在Windows操作系统上使用Linux操作系统
  • Http常⻅见请求/响应头content-type内容类型讲解(笔记)
  • Linux的指令(三)
  • 【GPTs】Ai-Ming:AI命理助手,个人运势与未来发展剖析
  • Spring-事务学习
  • yolov8目标检测如何设置背景/无标签图像参与训练
  • cooper+隐含数+2元cooper
  • 编辑器vim 命令的学习
  • 快速了解Zookeeper和etcd实现的分布式锁
  • 关于宝塔无法在php中安装fileinfo
  • 信也科技和云杉网络的AI可观测性实践分享
  • 如何将32位数据转化1bit valid,1bit modified,19bit tag, 3 bit index, 8bit数据
  • 海康视频监控云台位置切换与拍照图片下载