gem-hunter

vite-plugin-resource-waste

为什么需要它？

特点与优势

核心优势

功能一览

检测能力

报告输出

安装

npm install vite-plugin-resource-waste -D
# pnpm add vite-plugin-resource-waste -D
# yarn add vite-plugin-resource-waste -D

快速开始

// vite.config.ts
import { defineConfig } from 'vite'
import { resourceWaste } from 'vite-plugin-resource-waste'

export default defineConfig({
  plugins: [
    resourceWaste(),
  ],
})

npm run build

dist/resource-waste/report.html   # 可视化报告
dist/resource-waste/report.json     # JSON 数据

使用示例

基础用法（推荐默认值）

import { defineConfig } from 'vite'
import { resourceWaste } from 'vite-plugin-resource-waste'

export default defineConfig({
  plugins: [
    resourceWaste({
      htmlReport: true,       // 生成 HTML 报告
      wasteThresholdKb: 300,  // 浪费超过 300KB 时在终端提示
    }),
  ],
})

CI 构建阈值拦截：浪费超标则构建失败

resourceWaste({
  wasteThresholdKb: 200,
  failOnThreshold: true,  // 超过阈值则构建失败，CI 流水线中断
  silent: false,
})

按需开启/关闭检测项

resourceWaste({
  scanImportPatterns: true,   // 扫描 lodash 全量导入等
  scanUnusedImports: true,    // 扫描未使用的本地静态 import
  scanUnreachable: true,      // 扫描不可达页面/组件
  scanCacheStrategy: true,    // 扫描产物 cache 策略
  scanDuplicateDeps: true,    // 扫描重复依赖版本
})

Monorepo / 自定义扫描范围

resourceWaste({
  root: 'packages/app/src',
  include: ['**/*.tsx'],
  exclude: [
    '**/*.spec.*',
    '**/__tests__/**',
    '**/stories/**',
  ],
  reportDir: 'resource-waste', // 相对 outDir
})

静默模式（仅写报告，不输出终端日志）

resourceWaste({
  silent: true,
  htmlReport: true,
})

配置项

报告示例

终端输出

[vite-plugin-resource-waste] Resource waste analysis complete

  Issues       : 6
  Waste (est.) : 142.5 KB transfer / 64.1 ms parse
  Threshold    : 300 KB

  Top issues:
    [HIGH] 全量/低效导入: lodash (src/main.ts)
    [HIGH] 产物文件名缺少 content hash (assets/fonts/main.woff2)
    [MEDIUM] 不可达源文件 (src/pages/legacy/Double11.ts)
    [MEDIUM] Barrel 文件可能导致 tree-shake 失效 (src/pages/index.ts)

JSON 报告结构（节选）

{
  "summary": {
    "totalIssues": 6,
    "totalWasteTransferKb": 142.5,
    "totalParseMsEstimate": 64.1,
    "bySeverity": { "high": 2, "medium": 3, "low": 1 }
  },
  "issues": [
    {
      "category": "import-pattern",
      "severity": "high",
      "title": "全量/低效导入: lodash",
      "file": "src/main.ts",
      "suggestion": "改为 import debounce from 'lodash-es/debounce' 或按需导入",
      "cost": {
        "transferKb": 24,
        "parseMsEstimate": 10.8
      }
    }
  ]
}

开发模式

[vite-plugin-resource-waste] Dev mode: found 3 potential resource waste issue(s).
Run "vite build" for full report.

工作原理（简述）

vite build
  ├── buildStart      → glob 扫描 src 源文件
  ├── moduleParsed    → 构建 Module Graph（import 依赖关系）
  ├── generateBundle  → 收集 Rollup 产物（chunk + asset）
  └── closeBundle     → 运行分析器 → 生成报告

常见问题