Show HN：用于可重用代码块组装的 IDE

Tetrees 是一款面向开发者的 AI IDE，其核心理念是通过可重用的代码块加速编码过程。最近，团队重点优化了应用的初始加载体验，特别是针对冷启动时出现的白闪问题。

在分析用户行为时，团队发现从付费广告点击到应用完全加载之间，存在 2-5 秒的空白期，尤其是在首尔 AWS 区域以及加拿大/北美的移动设备和 Reddit 应用内 Webview 中。通过 Clarity 录制和日志分析，团队确认了用户在这段时间内高频率跳出的现象。

为了解决这个问题，团队采用了几项关键技术优化。首先，他们将关键样式内联在 HTML 头部，而不是依赖外部样式表。这样做的好处是，在浏览器未下载任何外部资源前，HTML 解析器即可处理内联样式，从而在首字节到达后立即绘制深绿色背景（Tetrees 的品牌色）。这几乎不增加网络传输成本，却彻底消除了白闪。

其次，团队将 favicon 从 SVG 改为 PNG 格式，因为 16x16 尺寸下 SVG 的细括号线会模糊为“T”形，而 PNG 缩放更清晰。同时，他们添加了查询参数（?v=）以强制浏览器刷新缓存——因为 HTTP 缓存头无法单独重置 favicon 的无限缓存。

此外，团队将样式表从 index.html 中分离出来，并通过 /public 目录提供服务。这是因为 Vite 5 的 html-inline-proxy 插件在处理 inline <style> 时有已知问题，而独立样式表可以通过 CDN 缓存，并在主 JS 包之前并行下载。他们还设置了 fetchpriority="high" 以确保该样式表在标签管理工具的资源之前加载。

至于加载过程中的旋转动画，其节奏（1.2 秒）与应用加载器保持一致，使用户在 React 提交 DOM 后获得无缝的过渡体验。

这些优化综合起来，使得 Tetrees 的首次加载体验更加流畅，品牌色在广告点击后的第一帧即呈现，从而降低了跳出率并提升了用户满意度。