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页面,打开后会出现这样的一个页面;可以查看依赖资源所占份额;

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

相关推荐
爱隐身的官人1 小时前
爬虫基础学习-爬取网页项目(二)
前端·爬虫·python·学习
Jackson@ML2 小时前
使用字节旗下的TREA IDE快速开发Web应用程序
前端·ide·trea
烛阴5 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者5 小时前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
vivi_and_qiao5 小时前
HTML的form表单
java·前端·html
骑驴看星星a6 小时前
Vue中的scoped属性
前端·javascript·vue.js
四月_h6 小时前
在 Vue 3 + TypeScript 项目中实现主题切换功能
前端·vue.js·typescript
qq_427506086 小时前
vue3写一个简单的时间轴组件
前端·javascript·vue.js
雨枪幻。7 小时前
spring boot开发:一些基础知识
开发语言·前端·javascript
lecepin8 小时前
AI Coding 资讯 2025.8.27
前端·ai编程