vite 查看项目依赖资源打包后的占比

vite 打包的时候发现 dist 包挺大的;可以查看相应依赖资源的所占比例去压缩对应资源或按需导入对应资源

使用的是 rollup-plugin-visualizer ;一个打包体积分析插件,对应webpack中的webpack-bundle-analyzer。配置好后运行构建命令会生成一个 stats.html

1、安装资源

npm i rollup-plugin-visualizer -D

2、添加 vite.config.ts 配置

import { visualizer } from "rollup-plugin-visualizer"

plugins: [ visualizer({ open: true }) ]

3、打包

npm run build

就出现了对应的html页面,打开后会出现这样的一个页面;可以查看依赖资源所占份额;

这样就可以看到各个资源的占比;

相关推荐
青青家的小灰灰25 分钟前
金三银四面试官最想听的 React 答案:虚拟 DOM、Hooks 陷阱与大型列表优化
前端·react.js·面试
HelloReader25 分钟前
深入理解 Tauri 架构与应用体积优化实战指南
前端
lemon_yyds25 分钟前
vue 2 升级vue3 : ref 和 v-model 命名为同名
前端·vue.js
codingWhat26 分钟前
小程序里「嵌」H5:一套完整可落地的 WebView 集成方案
前端·uni-app·webview
重庆穿山甲30 分钟前
Java开发者的大模型入门:Spring AI Alibaba组件全攻略(二)
前端·后端
光影少年32 分钟前
在 React 中,什么情况下需要用 useCallback 和 useMemo?它们的区别是什么?
前端·react.js·掘金·金石计划
合天网安实验室33 分钟前
H2O-3反序列化漏洞分析(CVE-2025-6507&CVE-2025-6544)
前端·黑客
袋鱼不重34 分钟前
Typescript 核心概念
前端·typescript
重庆穿山甲36 分钟前
Java开发者的大模型入门:Spring AI Alibaba组件全攻略(一)
前端·后端
ssshooter1 小时前
Tauri 踩坑 appLink 修改后闪退
前端·ios·rust