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

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

相关推荐
晴殇i12 分钟前
前端工程师必须掌握的SEO实战指南
前端·javascript·面试
problc25 分钟前
CSS 工具对比:UnoCSS vs Tailwind CSS,谁是你的菜?
前端·css
天天摸鱼的java工程师31 分钟前
互联网行业能力解刨:从Java后端八年开发经验看
前端·后端·程序员
brzhang37 分钟前
Android 16 卫星连接 API 来了,带你写出「永不失联」的应用
前端·后端·架构
John_ToDebug1 小时前
Chrome 浏览器前端与客户端双向通信实战
前端·c++·chrome
要加油哦~1 小时前
CSS | transition 和 transform的用处和区别
前端·css
小鱼人爱编程1 小时前
现代大前端是如何编码的?
android·前端·flutter
神仙别闹1 小时前
基于Java+VUE+MariaDB实现(Web)仿小米商城
java·前端·vue.js
袁煦丞1 小时前
低成本私有云存储方案Nas-Cab:cpolar实验室第508次成功挑战
前端·程序员·远程工作
小公主1 小时前
「前端必备」Flex 布局全解析:从入门到深度计算,搞懂弹性盒子!
前端·css