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

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

相关推荐
a1117766 小时前
医院挂号预约系统(开源 Fastapi+vue2)
前端·vue.js·python·html5·fastapi
0思必得06 小时前
[Web自动化] Selenium处理iframe和frame
前端·爬虫·python·selenium·自动化·web自动化
行走的陀螺仪8 小时前
uni-app + Vue3编辑页/新增页面给列表页传参
前端·vue.js·uni-app
We་ct9 小时前
LeetCode 205. 同构字符串:解题思路+代码优化全解析
前端·算法·leetcode·typescript
2301_812731419 小时前
CSS3笔记
前端·笔记·css3
ziblog9 小时前
CSS3白云飘动动画特效
前端·css·css3
越努力越幸运5089 小时前
CSS3学习之网格布局grid
前端·学习·css3
半斤鸡胗9 小时前
css3基础
前端·css
ziblog9 小时前
CSS3创意精美页面过渡动画效果
前端·css·css3
akangznl9 小时前
第四章 初识css3
前端·css·css3·html5