Vue3 + vite 打包后查看资源占比

1. Vue3 + Vite 中Vite使用的rollup 打包，所以用 rollup-plugin-visualizer --save-dev插件来进行打包体积大小的分析

安装插件

npm install rollup-plugin-visualizer --save-dev

在vite.config.js 或者 vite.confg.ts中使用

import { visualizer } from 'rollup-plugin-visualizer';

plugins: [
	// 打包后查看资源占比,执行打包后会生成一个stas.html
	visualizer({
		open: true, // true 打包完自动打开分析页面，false 不会自动弹出
		filename: 'stats.html', // 分析图生成的文件名
		gzipSize: true, // 是否统计并显示gzip
		brotliSize: true, // 是否统计并显示brotli
	}),
]

执行打包后会生成一个stas.html