vue3+Ts+vite 打包体积分析插件 rollup-plugin-visualizer

官方地址：https://github.com/btd/rollup-plugin-visualizer

使用方法

npm安装：npm install --save-dev rollup-plugin-visualizer

然后配置vite.config.ts中的插件如下

1、引入模块

2、然后找到plugins模块，在其中加入visualizer插件。

// 引入rollup-plugin-visualizer模块
import { visualizer } from "rollup-plugin-visualizer";



export default defineConfig({
  plugins: [
    vue(),
    visualizer({
        open:true,  //注意这里要设置为true，否则无效
        filename: "stats.html", //分析图生成的文件名
        gzipSize: true, // 收集 gzip 大小并将其显示
        brotliSize: true, // 收集 brotli 大小并将其显示
    })
  ],
})

3、打包项目，等待片刻，生成分析视图，视图会自动跳出来，如下