有了这些插件，我不相信你还不会优化Vite项目

萌萌哒草头将军

发布于 2025-05-02 14:31:45

25900

代码可运行

文章被收录于专栏：前端框架前端框架

运行总次数：0

代码可运行

前言

上篇文章介绍了两个 vite 打包项目时分析打包产物的插件，好多小伙伴反馈，还想让我再来几个，所以，今天我们一口气，再来介绍五个

正文

1. rollup-plugin-visualizer

简介：一款经典的构建体积可视化插件，支持生成 treemap、sunburst、network 三种类型的交互式打包分析图。Vite 使用时，通过 Rollup 插件机制集成。

安装：

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

基本配置：

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

exportdefault {
  build: {
    rollupOptions: {
      plugins: [
        visualizer({
          open: true, // 构建完成后自动打开浏览器
          gzipSize: true, // 统计 gzip 压缩后的大小
          brotliSize: true, // 统计 brotli 压缩后的大小
        })
      ]
    }
  }
};

rollup-plugin-visualizer

适合场景：

快速查看最终构建产物的体积分布。
排查哪个模块体积过大。

2. vite-plugin-perfsee

简介： Perfsee 出品的性能分析工具，结合了 Lighthouse 打分、构建体积分析、热更新性能分析，适合深入性能 Profiling。

安装：

npm install vite-plugin-perfsee --save-dev

基本配置：

// vite.config.ts
import { perfseePlugin } from '@perfsee/vite-plugin';

export default {
  plugins: [
    perfseePlugin({
      analyze: {
        open: true, // 分析完成后打开浏览器
      },
    }),
  ],
};

perfsee

适合场景：

构建性能综合检测。
查找页面加载、打包体积、热更新慢的原因。
提交 PR 时做性能回归检测。

3. vite-plugin-analyze

简介： OriginJS 团队开发的轻量打包分析插件，可以在终端输出模块大小列表，也可以生成 HTML 报告。

安装：

npm install vite-plugin-analyze --save-dev

基本配置：

// vite.config.ts
import Analyze from 'vite-plugin-analyze';

export default {
  plugins: [
    Analyze({
      summaryOnly: false, // 是否只输出概览信息
      limit: 10, // 仅显示前10大模块
    }),
  ],
};

vite-plugin-analyze

适合场景：

只想快速在控制台看打包模块大小。
不想开网页浏览器时用。

4. speed-measure-vite-plugin

简介：模仿 speed-measure-webpack-plugin 的 vite 版本，用来测量每个插件的执行耗时，找出构建瓶颈。

安装：

npm install speed-measure-vite-plugin --save-dev

基本配置：

// vite.config.ts
import { SpeedMeasurePlugin } from 'speed-measure-vite-plugin';

export default {
  plugins: [
    SpeedMeasurePlugin()
  ],
};

speed-measure-vite-plugin

适合场景：

构建时间过长时，想知道哪个插件拖慢了速度。
调优 Vite 插件链顺序或优化插件。

5. vite-plugin-bundle-stats

简介：生成类似 Webpack stats.json 的分析数据文件，可以配合各种第三方可视化工具进一步分析。

安装：

npm install vite-plugin-bundle-stats --save-dev

基本配置：

// vite.config.ts
import { bundleStats } from 'vite-plugin-bundle-stats';

export default {
  plugins: [
    bundleStats({
      emitFile: true, // 是否输出 stats.json
      filename: 'bundle-stats.json', // 输出文件名
    }),
  ],
};