一、先對齊現象:不是「卡住」,而是卡住哪個階段
Bolt.new與StackBlitz的使用體感很像:右側終端開始跑npm install、左側程式碼自動生成、接下來要等預覽或構建逾時訊息彈出。真正影響你排查效率的,是能不能把問題分成「下載」「解壓與編譯」「服務拉起」三件事。許多人看到進度列停住就急著換構建逾時的說法並狂換機場節點,卻忽略了同一個視窗可能在背景同時對十幾種主機建立連線,其中只要有一條被送去錯的出口,使用者介面就只會卡在泛用的 loading。
WebContainer把 Node 類執行時塞進線上 IDE的流程,需要載入 WASM 與對應的啟動腳本、也要把套件快取鏈建好;這些資訊往往不是單網址能概括,而是由產品團隊在多個區域/CDN/API 上做切片。對代理使用者來說,最具診斷價值的關鍵句是:把「你看到的那一行錯」對應到「那一秒鐘連線面板裡實際出現的最後機台名」。沒這一步,任何分流規則都只是在猜謎。
若你已能穩定匯入訂閱,但策略名稱與順序不熟,請先跑一次《Clash 訂閱連結怎麼用?》把基礎走通;接著再打開連線日誌,而不是直接貼來路不明的規則表。
二、線上環境的流量其實分三層:產品殼層、npm 鏈路、容器與預覽
第一層是線上 IDE本身的入口與帳號:bolt.new、stackblitz.com與其子網域,負責頁框、專案清單、分享連結鑑權等。許多人確認「能打開這層網頁」就認為構建逾時與網路無關,但第二層的npm階段才剛開始:registry.npmjs.org只不過是最容易想到的主機之一,套件 metadata、壓縮套件本體 tarball、scoped 套件路徑、以及 postinstall 去抓 GitHub tarball 的流程,常常在連線紀錄裡拉出一長串互不相同的後綴。
第三層是WebContainer與預覽:除了把執行核心搬進 Worker,還要拉取對應的啟動腳本/map 檔/快取區塊。不同產品迭代時,CDN 編排會與第一年教學文不同頁;因此請把「任何固定清單」都當參考,把你自己裝置上當下命中的連線紀錄視為準則來源。Clash這類核心是透明代理方案的價值,就在於它不只用口號講規則,而是能對照規則序與實際出口。
與vscode.dev或純靜態範例相比,Bolt.new/StackBlitz對網路的假設更接近「一整套小型建置工廠」:對延遲、封包重置、連線並發與中段切換都十分敏感。Mihomo類核心在日誌上若顯示反覆換節點,你在瀏覽器就只會感受到預設的逾時視窗一再出現。
三、為什麼「本機終端跑得動」≠「線上環境也一定順」
企業或被控管的網路常見做法是:對外放行一般 HTTPS,但對 WebSocket、對特定雲端的長連線、或對 WASM 對應的資源載入路徑額外套規則。你在本機用終端設定HTTPS_PROXY或依賴 TUN,整個系統的出口一致;然而在瀏覽器標籤分頁中,請求來源標記、來自 Service Worker/Worker 的流量、HTTPS/DNS‑over‑HTTPS/QUIC(若環境開啟)也可能讓你看到「同源策略下仍不同路」。這不是產品寫錯,而是線上 IDE對瀏覽器的安全容器切得很細。
若你曾因 Git、curl、npm在終端順利而沾沾自喜,請再看一次:構建逾時如果發生在pnpm或vite預備階段,瀏覽器裡對應的仍是大量平行連線。Clash 分流規則若把其中一部分送去DIRECT、另一部分送去機場上游,結果就是握手成功但資料流對不起來。《macOS/Windows 終端機怎麼讓 npm、pnpm、yarn 都吃 Clash 代理環境?》能幫你理解套件倉路由,但請勿把pnpm在本機.npmrc的微調一成不變地套回瀏覽器沙盒:WebContainer不吃你 zsh profile 那份設定。
四、瀏覽器場景下,系統代理與 TUN 怎麼選
只開桌面版「僅對應瀏覽器擴充套件」有時並不足夠:Bolt.new或StackBlitz裡許多請求並非走你看到的那個分頁的擴充層級,而是由瀏覽器的網路基礎組件送出。對多數使用者,最省事的方式仍是讓作業系統層的出口一致;若你已熟悉路由接管,可先閱《Clash TUN 模式開啟方法》,再回來對照連線紀錄中是否開始出現與套件倉相符的主機序列。
若你只敢先開分流規則卻不收斂GEOIP或區域DIRECT順序,日誌常會上演「看得到一半 registry、 tarball 的另一半被提前送去直連」的戲碼。Mihomo相容系多數提供統計表,可把「被拒絕」「逾時」「重試」對應到具體主機後綴,這比盲改規則更省時間。
五、建議排查順序:先做日誌,再談換節點
下列順序刻意把換節點放在末尾,避免因策略本身錯置而對線路錯上加錯:
- 在乾淨的瀏覽器設定下重現一次問題;同時確認桌面的Clash用戶端正執行、模式與所選族群名稱明確。
- 打開即時連線清單,篩
npm、github、stackblitz、bolt等你熟的主關鍵字;對照發生卡住那一刻是否剛好有一條顯示為DIRECT或落在怪異國碼族群。 - 檢視 DNS:
fake-ip是否與規則衝突、是否缺少必要的fake-ip-filter或nameserver-policy對應到反覆問題的HTTPS紀錄。 - 對照規則表:將必須同出口的主機類型集中到同一策略群組,避免「一半走 PROXY_FULL、另一半走輕量化節點」造成長連線斷線。
- 最後在非尖峰時間更換對長連線較友善的提供者;若你只換節點卻發現問題主機類型完全相同,就代表瓶頸已不在鏈路上。
若在開啟 TUN/混合埠前就遇到無法載入組態等通用問題,可先查《Clash 常見報錯解決方案》打底;本文主旨仍在構建逾時與WebContainer對應的網域名稱對齊。
六、規則寫法:請以你自己的連線紀錄為準收集後綴
下列條目屬於多數教學與文件會反覆提起的方向性線索,不是「貼上就好」的萬用表;產品與區域CDN改版後,請以當時連線紀錄為準:
registry.npmjs.org與npmjs.org:npm的中樞請求最常落點。github.com、objects.githubusercontent.com:tgz與發行資產常來源於此。bolt.new、stackblitz.com:產品介面/專案中樞類需求。- 日誌中若出現以
webcontainer或類似詞根組成的子網域,請以完整名逐條歸並,而不要硬用過寬的DOMAIN-KEYWORD一刀切。 - 其他雲端邊緣:對應靜態模組或大檔載入時,請留意是否為臨時子網域;可短暫寫細則,待穩定後再抽象成
DOMAIN-SUFFIX。
對構建逾時最危險的寫法是:把數十個無關關鍵字塞成一條規則,最後卡在誤命中其他影音或遊戲流量上,徒增除錯難度。
七、規則範例 YAML(將 PROXY 改成你的策略名稱)
# Example only — replace PROXY with your policy group name
rules:
- DOMAIN-SUFFIX,bolt.new,PROXY
- DOMAIN-SUFFIX,stackblitz.com,PROXY
- DOMAIN-SUFFIX,npmjs.org,PROXY
- DOMAIN-SUFFIX,githubusercontent.com,PROXY
- DOMAIN-SUFFIX,github.com,PROXY
若日誌還多出第二方 CDN/API,請將該連線紀錄對應的後綴加在更近的位置;不要把企業GEOIP,CN,DIRECT或類似條列誤插在套件倉路由之前,除非你十分確定在該段網路下國內路徑比上游更適合套件下載——多數情形下,對構建逾時更友善的出口仍是穩定的上游而非被動直連。
八、分流設計速查表(以症狀回推檢查點)
| 你看到的情況 | 優先對照的主機方向 | 設定提示 |
|---|---|---|
| 終端顯示套件解析卡住 | registry.npmjs.org/npmjs.org | 確認沒有被DIRECT或區域規則截走 HTTPS。 |
tgz下載到一半重置 | objects.githubusercontent.com/github.com | 與 registry 的出口應基本一致,以免平行請求對不起來。 |
| 容器初始化失敗但有泛用錯誤碼 | WebContainer相關子網域與對應靜態路徑 | 比對 CSP 類限制與 CDN 並存;仍以日誌為準命名。 |
| 預覽埠已開頁面白屏 | 區域對齊的邊緣資產/HMR類 websocket | 確認代理核心是否對長連線友善,避免來回切換節點。 |
九、DNS 放大器:為什麼 fake-ip 常讓人誤會成「規則沒問題」
在enhanced-mode: fake-ip的情境下,應用程式先拿到一串虛構位址,真正的出口決策在核心裡發生;若規則寫對但 DNS 對應的握手反覆對錯對象,你只會在各種載入條上看到「快到了又退回」。對Bolt.new/StackBlitz來說,同一頁載入順序對套件倉尤其殘酷:只要其中一環延遲,整段預備流程就會排到逾時視窗。Mihomo對fallback與nameserver-policy的描述相對細,值得你花十分鐘讀對應欄位的註解,而不是複製陌生人的超大 DNS 區塊。
若在切換redir-host類思維或調整過 DNS 後,日誌上同一主機馬上變為穩態命中,那麼先前的構建逾時很大比例並非來自專案自身,而是解析鏈在扯後腿。
十、換機場並不是萬用解:對長連線與 QUIC 相容性也要有心理準備
不同上游對grpc、h2、websocket 的中介程度不一;對線上 IDE來說,長連線在 DevTools 網路面板裡看起來平靜,實際卻常被中間設備截斷。若你在同一節點上測試其他網頁順利但WebContainer仍異常,可以嘗試關閉瀏覽器實驗性 QUIC/HTTP3(依平台與瀏覽器版本設定路徑而異)、或將該環境的流量暫時導向對長連線較友好的策略群組。這類設定屬「網路特性」調整範疇,與複製規則表貼上不必然等價。
企業環境若在 SSL 解密或透明代理上做策略,請先與網路管理單位確認:是否允許對外建立足夠的平行連線、以及對 WebAssembly/Worker 對應的 MIME 規則有無特例攔截。若管理端無法協助,你只能接受「離線備援」或使用公司核准的跳板,這已超出分流規則能處理的邊界。
十一、為什麼不要拿 Cursor、Windsurf 那套市集規則硬抄
站內針對 Cursor 擴充市集與Windsurf/Codeium的文,核心精神都是「對齊構建逾時或補全流程中的多段鏈路」;但那兩類場景對應的網域集合並不等於vscode.dev或bolt.new。將 Cursor 的文直接貼到 Bolt/StackBlitz 實際命中的網域上時,最常見的假性改善是市集下載順了,可是npm和WebContainer仍以另一種出口對外,你的錯覺來自「問題被轉移到別處」,而不是問題消失。
因此更務實的作法是把每個產品各建一整段註解區塊,並在更新訂閱後重新跑一次日誌校驗:Mihomo對rules的順序非常敏感;不要假設上一年熱門教學的優先級仍對應你現在手上的上游。
十二、常見問題
瀏覽器能開官網,為什麼線上環境仍在轉圈圈?
首頁靜態內容與 WebWorker/WASM/大型 tarball 的流量路徑不同;若其中一段仍直連或被公司網路攔截,就會只留下「看得到介面但裝不好依賴」的症狀。請對照套件倉與WebContainer相關主機是否進入預期的策略群組。
只把 registry.npmjs.org 走代理為什麼還會卡?
npm會同時請求套件 tarball、套件 postinstall 連到 GitHub、以及各種 CDN 或子網域;只覆蓋單一路徑常被其他連線拉回DIRECT或被廣域規則截走。Clash日誌中若出現多個後綴,應視為一整組平行鏈路一併處理。
需要先改 npm registry 鏡像嗎?
先確認是路由與規則問題而非單一來源壅塞;企業環境可自行評估鏡像,但要注意 TLS/憑證與行為是否與公開倉保持一致。
十三、實務上容易踩的三大坑
第一個坑是把所有 HTTPS 都算成同一類型流量:套件倉對延遲與並發的假設和下載電影 CDN 並不一樣;第二個坑是迷信「國內直連就比較快」而硬把tgz留在DIRECT:只要同一時段另一條請求被你送去上游,協議握手仍可能打架;第三個坑是對構建逾時的秒數過度在意,卻不願意對照封包紀錄,最後只是把逾時門檻換成另一個視覺上比較不刺眼的數字卻無助於根本原因。
若你已閱到此段並完成一次「重現問題+對照日誌」循環,你手上應已有具體要補進分流規則的子網域清單,而不是空想。
十四、結語:把「線上環境怪怪的」收成可複製的工程問題
2026 年如果你常用Bolt.new、StackBlitz這類強調秒開專案的線上 IDE,請記住三件可驗證的事:npm不是只有registry.npmjs.org那條路;WebContainer對網路基礎的假設比一般頁嚴苛;而你手上的Clash 分流順序是否真的讓這些並行請求進入同一類穩態出口。Mihomo相容客戶端若搭配合理的日誌習慣,你能把抽象的構建逾時拉回具體的網域名稱上處置。
相較只提供固定模式或缺乏連線對照的輕量化代理程式,開源相容核心在規則透明度與除錯體驗上往往更適合程式開發者:你能解釋「為什麼這條走這裡」而不是只能祈禱自動模式剛好用。對照這類差異後,若想用同一個核心把桌面與套件倉路由一起收束,現在就可以立即免費下載 Clash,開啟流暢上網新體驗。