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 的首次加載體驗更加流暢，品牌色在廣告點擊後的第一幀即呈現，從而降低了跳出率並提升了用户滿意度。