現在的快取外掛多半有一項叫做「未使用 CSS 移除」的功能。它會掃你的頁面,把沒有被任何元素用到的選擇器整批刪掉,然後送一份瘦身過的樣式表給瀏覽器。
大部分時候這是好事。壞在它的判斷是靜態的。
它認不得的三種寫法
① 由建構器在後台加上去的類別。 頁面元素的「額外 class」欄位填進去的名字,掃描器在樣板裡找不到來源,於是判定沒人用。
② 只宣告在 :root 上的設計 token。 你定義了一組變數準備給之後用,現在還沒有人引用它 —— 對掃描器來說那就是死碼。
③ 由腳本在執行期掛上去的類別。 掃描發生在執行之前。
為什麼這種失敗特別難認
因為你能拿到的每一個證據都說它是好的。
伺服器上的檔案有那段宣告。合併後的那一份也搜得到字串。開發者工具的網路面板看得到檔案載入成功、狀態碼 200。
唯一會說實話的是 getComputedStyle()。 它回報的是瀏覽器真的用了什麼值。我們現在驗收一律查這個,不拿「伺服器上的檔案有這段」當證據 —— 那正是前兩次全綠的原因。
我們的做法
會被剔除的那一類宣告,改走外掛層的行內注入。行內的樣式不經過剔除流程。
這不是繞過工具,是承認一件事:保證載入順序的機制,不保證東西會被載入。



