vite-plugin-resource-waste 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -12
- package/dist/html-W5TFGDIJ.js +1 -0
- package/dist/index.js +6 -892
- package/package.json +13 -12
- package/dist/index.cjs +0 -929
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.cts +0 -76
- package/dist/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# vite-plugin-resource-waste
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**基于 Vite/Rollup Module Graph 的前端资源浪费分析插件**
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
|
|
9
9
|
很多团队只关注「包体积多少 KB」，却忽略了更隐蔽的浪费：
|
|
10
10
|
|
|
11
|
-
- `import _ from 'lodash'` 只用了 `debounce`，tree-shake 失效，整包进 bundle
|
|
12
|
-
- 活动页下线了，组件文件还在 `src/pages/legacy/`
|
|
13
|
-
- 字体/图片产物没有 content hash
|
|
14
|
-
- 同一依赖两个版本，重复打包 +
|
|
11
|
+
- `import _ from 'lodash'` 只用了 `debounce`，tree-shake 失效，整包进 bundle；
|
|
12
|
+
- 活动页下线了，组件文件还在 `src/pages/legacy/` 里；
|
|
13
|
+
- 字体/图片产物没有 content hash，回访用户每次重复下载；
|
|
14
|
+
- 同一依赖两个版本，重复打包 + 缓存失效；
|
|
15
15
|
|
|
16
16
|
**vite-plugin-resource-waste** 在 `vite build` 时自动分析这些问题，把「浪费」量化为 **传输体积（KB）+ 解析耗时（ms）**，并给出可执行的修复建议。
|
|
17
17
|
|
|
@@ -31,11 +31,11 @@
|
|
|
31
31
|
|
|
32
32
|
### 核心优势
|
|
33
33
|
|
|
34
|
-
- **多维浪费模型**：不只看 JS 体积，还覆盖缓存失效、重复依赖等非 bundle
|
|
35
|
-
- **零业务侵入**：作为 Vite
|
|
36
|
-
- **可执行建议**：每条 issue 附带 severity、开销估算、修复 suggestion
|
|
37
|
-
- **Dev + Build
|
|
38
|
-
- **TypeScript 友好**：完整类型导出，配置项有 IDE
|
|
34
|
+
- **多维浪费模型**：不只看 JS 体积，还覆盖缓存失效、重复依赖等非 bundle 浪费；
|
|
35
|
+
- **零业务侵入**：作为 Vite 插件接入，无需修改业务代码；
|
|
36
|
+
- **可执行建议**：每条 issue 附带 severity、开销估算、修复 suggestion；
|
|
37
|
+
- **Dev + Build 双模式**：开发时轻量预警，构建时完整报告；
|
|
38
|
+
- **TypeScript 友好**：完整类型导出，配置项有 IDE 提示；
|
|
39
39
|
|
|
40
40
|
---
|
|
41
41
|
|
|
@@ -72,8 +72,6 @@ npm install vite-plugin-resource-waste -D
|
|
|
72
72
|
# yarn add vite-plugin-resource-waste -D
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
-
**要求**：Vite 5 / 6 / 7，Node.js 18+
|
|
76
|
-
|
|
77
75
|
---
|
|
78
76
|
|
|
79
77
|
## 快速开始
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var n={"static-unused-js":"\u9759\u6001\u672A\u4F7F\u7528 JS","unreachable-component":"\u4E0D\u53EF\u8FBE\u7EC4\u4EF6/\u9875\u9762","cache-miss":"\u7F13\u5B58\u7B56\u7565\u98CE\u9669","duplicate-dependency":"\u91CD\u590D\u4F9D\u8D56","import-pattern":"\u5BFC\u5165\u6A21\u5F0F\u6D6A\u8D39","prefetch-waste":"\u9884\u52A0\u8F7D\u6D6A\u8D39"},i={high:"\u9AD8",medium:"\u4E2D",low:"\u4F4E"},p='<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Resource Waste Report</title><style>body{font:14px/1.5 system-ui,sans-serif;margin:20px;color:#1e293b}table{border-collapse:collapse;width:100%;margin-top:12px}td,th{border:1px solid #cbd5e1;padding:8px;text-align:left;vertical-align:top}th{background:#f1f5f9}.badge{font-size:12px;font-weight:600}.cards{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}.card{border:1px solid #cbd5e1;border-radius:8px;padding:10px 14px;min-width:120px}.muted{color:#64748b;font-size:13px}code{font-size:12px;background:#f1f5f9;padding:2px 4px}</style></head><body><h1>\u524D\u7AEF\u8D44\u6E90\u6D6A\u8D39\u5206\u6790\u62A5\u544A</h1><p class="muted">{{META}}</p><div class="cards">{{SUMMARY}}</div><table><thead><tr><th>\u7EA7\u522B</th><th>\u7C7B\u522B</th><th>\u95EE\u9898</th><th>\u6587\u4EF6</th><th>\u4F20\u8F93</th><th>\u89E3\u6790</th><th>\u5EFA\u8BAE</th></tr></thead><tbody>{{ROWS}}</tbody></table><p class="muted">{{LEGEND}}</p></body></html>';function l(e){let{summary:s,issues:d}=e,o=d.map(t=>`<tr><td class="badge">${i[t.severity]}</td><td>${n[t.category]}</td><td><b>${a(t.title)}</b><br/><span class="muted">${a(t.detail)}</span></td><td><code>${a(t.file??"-")}</code></td><td>${t.cost.transferKb>0?t.cost.transferKb+" KB":"-"}</td><td>${t.cost.parseMsEstimate>0?t.cost.parseMsEstimate+" ms":"-"}</td><td>${a(t.suggestion)}</td></tr>`).join(""),c=r("\u95EE\u9898\u603B\u6570",s.totalIssues)+r("\u6D6A\u8D39\u4F20\u8F93",s.totalWasteTransferKb+" KB")+r("\u6D6A\u8D39\u89E3\u6790",s.totalParseMsEstimate+" ms")+r("\u9AD8\u5371",s.bySeverity.high);return p.replace("{{META}}",`\u751F\u6210: ${e.generatedAt} \xB7 \u6A21\u5F0F: ${e.mode}`).replace("{{SUMMARY}}",c).replace("{{ROWS}}",o||'<tr><td colspan="7">\u672A\u68C0\u6D4B\u5230\u8D44\u6E90\u6D6A\u8D39\u95EE\u9898</td></tr>').replace("{{LEGEND}}","\u6784\u5EFA\u671F\u9759\u6001\u5206\u6790\uFF1Btree-shake \u6709\u6548\u65F6\u672A\u4F7F\u7528 export \u4E0D\u4E00\u5B9A\u589E\u5927\u9996\u5305\u3002")}function r(e,s){return `<div class="card"><div class="muted">${e}</div><div><b>${s}</b></div></div>`}function a(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}export{l as renderHtmlReport};
|