BeeCount-Cloud/_commit_msg.txt at main · tkhs101/BeeCount-Cloud · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
perf(frontend): Amount.tsx 别为 useReducedMotion 拖进 126 kB 动画引擎

## 一个核心组件,拖着一个动画引擎进首屏

`packages/web-features/src/components/Amount.tsx` 只 import 了 framer-motion
的 **`useReducedMotion`** 一个钩子 —— 它的实现本身就是一行

```ts
matchMedia('(prefers-reduced-motion: reduce)').matches
```

而 `prefers-reduced-motion` 本来就是**给 CSS 媒体查询用的**,压根不需要
126 kB 的动画引擎。

`Amount` 是**全站所有金额文案**都走的组件(几乎每个页面都要用),
所以 framer-motion 被拖进了**入口的静态 import 图** —— Vite 只给
「入口静态依赖」的 chunk 发 `modulepreload`,于是它进了首屏下载。

改成 `packages/web-features/src/lib/useReducedMotion.ts`(~30 行原生实现,
带老 WebKit 的 `addListener` 兜底)。

## 实测

| | 首屏预取条数 | 首屏 JS 合计 |
|---|---|---|
| 本会话开始 | 5 | 1672 kB |
| 上一提交(去掉 recharts 规则) | 4 | 1479 kB |
| **本提交** | **3** | **1479 kB** |

framer-motion(126 kB)不再首屏下载。

⚠️ 上一提交的经验在这里直接复用:改 `manualChunks` **没用**
(framer-motion 的规则去掉了首屏也不变)—— 因为问题不在 chunk 划分,
而在**谁静态 import 了它**。要改的是 import 图,不是 chunk 名字。

## 验证

307 前端测试通过 / `tsc` 0 错 / `vite build` 通过。

语义与 framer-motion 的实现**完全一致**(它内部也是 matchMedia)。
唯一差别是不做 SSR 默认值处理 —— 本项目是纯客户端 SPA,没有 SSR。

## 剩下的首屏预取

`react-vendor`(176 kB,合理)+ `cmdk`(44 kB,命令面板)+
`poster`(36 kB,海报导出)。后两个同样可能是被 shell 里的全局对话框
静态拖进来的,要动按同样的方法:**先查谁静态引了它,再改 import 图。**