懒加载与预热：把首次点击的 1–2 秒藏起来
· 2 分钟阅读
「加了工具，首页会不会变慢？」这是我自己最担心的问题。解决办法不是压缩代码，而是分清两件事：没进页面不该花钱，进了页面第一次别等。
第一层：路由级拆分
Docusaurus 会给每个页面单独打包。工具页的组件只有 10 KB，首页和文章页根本不会下载它。禁用缓存实测：
| 页面 | JS | WASM |
|---|---|---|
| 首页 | 570 KB（含框架与搜索） | 0 |
/tools/image-compress | 570 KB + 10 KB | 0 |
| 点击「开始压缩」后 | +22 KB | +246 KB |
首页的 570 KB 是框架、React、搜索客户端，和工具无关。
第二层：库级懒加载
压缩逻辑和 jSquash 都放在 await import() 里，只有点按钮才拉。WASM 更晚，真正开始编码才请求，而且按格式只拉需要的那一个。
第三层：预热
懒加载解决了「不点不花钱」，但第一次点要等 250 KB 下载，手机上大约 1–2 秒。我的做法是：用户选完图就预热。
- 根据当前输出格式，提前初始化对应编码器；
- 切换格式时防抖 500 ms 再预热，避免来回切反复下载；
- 预热失败静默忽略，正式压缩时还会重试并提示。
实测：选图后 34 ms 开始下载编码器；点「开始压缩」到出结果只要 172 ms。
取舍
预热会多下载一次 WASM，但只发生在「用户已经选了图」这个强意图之后，不是无条件预取。对流量敏感的场景，也可以退化成纯懒加载，只是第一次点击会慢一点。
经验
懒加载和预热不是对立选项。前者管「入口成本」，后者管「首次交互成本」，边界划清楚，两个目标可以同时达到。