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