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

admin管理员组

文章数量:1437020

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

前言

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

正文

1. rollup-plugin-visualizer

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

安装：

代码语言：javascript代码运行次数：0运行复制

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

基本配置：

代码语言：javascript代码运行次数：0运行复制

// 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

rollup-plugin-visualizer

适合场景：

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

2. vite-plugin-perfsee

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

安装：

代码语言：javascript代码运行次数：0运行复制

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

基本配置：

代码语言：javascript代码运行次数：0运行复制

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

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

perfsee

perfsee

适合场景：

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

3. vite-plugin-analyze

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

安装：

代码语言：javascript代码运行次数：0运行复制

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

基本配置：

代码语言：javascript代码运行次数：0运行复制

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

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

vite-plugin-analyze

vite-plugin-analyze

适合场景：

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

4. speed-measure-vite-plugin

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

安装：

代码语言：javascript代码运行次数：0运行复制

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

基本配置：

代码语言：javascript代码运行次数：0运行复制

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

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

speed-measure-vite-plugin

speed-measure-vite-plugin

适合场景：

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

5. vite-plugin-bundle-stats

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

安装：

代码语言：javascript代码运行次数：0运行复制

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

基本配置：

代码语言：javascript代码运行次数：0运行复制

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

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

vite-plugin-bundle-stats

vite-plugin-bundle-stats

适合场景：

• 希望拿到详细的构建结构数据做自定义分析。
• 用其他专业工具（比如 source-map-explorer）进一步解构。

最后

相信这么多插件，你也眼花缭乱了，但是你可以根据实际需求，选择其中一两个插件实践一下，相信可以更加直观的感受到其中真正的奥义！

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-04-28，如有侵权请联系 cloudcommunity@tencent 删除优化打包vite插件配置

本文标签： 有了这些插件，我不相信你还不会优化Vite项目