vite打包可视化工具rollup-plugin-visualizer图文教程

序： 

        1、github地址==》GitHub - btd/rollup-plugin-visualizer: 📈⚖️ Visuallize your bundle

        2、Options配置中文翻译文档，关注公众号“程序员野区”，回复：  visualizer

先看效果

 然后他有什么用呢？

举个例子，你的项目引用了jquery@2.1,的依赖，而你npm instal的第三方插件引用了jquery@2.2，这样你vite可能会将两个jquery版本依赖都打包进去。你体积就变大了，这个插件就是方便你查看打包后，有哪些依赖

正文：

        1、安装依赖

cnpm i rollup-plugin-visualizer -D

        2、vite.config.ts 配置

import { defineConfig,type PluginOption } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';

visualizer({
    open:true //在默认用户代理中打开生成的文件
  }) as PluginOption],

 配置部分

 中文翻译看博文头部的序中第二点