Vite 构建分析插件 rollup-plugin-visualizer的使用

webpack中我可以使用 webpack-bundle-analyzer进行打包分析，目前 vite2.x 是基于 rollup 打包的，我们可以使用install rollup-plugin-visualizer。

npm install rollup-plugin-visualizer -D

// vite.config.js
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    // 将 visualizer 插件放到最后
    visualizer()
  ]
})

执行：npm run build ，构建成功之后会在根目录下生成一个 stats.html ，打开页面即可以看到分析结果。我们还可以通过左上角的 排除、包含 输入框对依赖模块进行筛选。同时鼠标移入各模块，可以看到详细的分析数据：

image.png