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

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

相关推荐
cypking12 小时前
Vue 3 + Vite + Router + Pinia + Element Plus + Monorepo + qiankun 构建企业级中后台前端框架
前端·javascript·vue.js
雨雨雨雨雨别下啦12 小时前
【从0开始学前端】vue3简介、核心代码、生命周期
前端·vue.js·vue
simon_934913 小时前
受够了压缩和收费?我作为一个码农,手撸了一款无限容量、原图直出的瀑布流相册!
前端
e***877013 小时前
windows配置永久路由
android·前端·后端
Dorcas_FE14 小时前
【tips】动态el-form-item中校验的注意点
前端·javascript·vue.js
小小前端要继续努力14 小时前
前端新人怎么更快的融入工作
前端
四岁爱上了她14 小时前
input输入框焦点的获取和隐藏div,一个自定义的下拉选择
前端·javascript·vue.js
fouryears_2341714 小时前
现代 Android 后台应用读取剪贴板最佳实践
android·前端·flutter·dart
boolean的主人15 小时前
mac电脑安装nvm
前端
用户19729591889115 小时前
WKWebView的重定向(objective_c)
前端·ios