Minifier

JS / CSS Minifier + Beautifier

貼上 JavaScript 或 CSS — 按 Minify 移除空白與註解以利上線,或按 Beautify 把混淆 / 單行程式碼重新縮排成可讀格式。自動偵測語言,全部在瀏覽器內運算。

保守。我們移除註解與空白,但 不會 變動識別字(foo 還是 foo)、不會 做 dead-code elimination、不會 重新排序語句。目標是安全、可預測的位元組減量。如果你要極致壓縮,把輸出再丟進 Terser 或 esbuild 做最後一道工。

不會。tokenizer 會辨識字串、template literal、regex 的語法情境。"..."、'...'、\`...\`、/regex/flags 內部的空白與看似註解的字串都會原封保留。授權 banner 註解(/*! ... */)也會被保留。

輸入
輸出

為日常 JS + CSS 開發而生

上線時 Minify、除錯時 Beautify — 加上幾個讓你真正用得開心的小細節。

兩種語言、兩種轉換

JavaScript 或 CSS、Minify 或 Beautify,一個工具搞定。自動偵測會從內容線索判斷語言,你也可以從 Language 下拉選單手動覆寫。

保守的 Minify

我們移除註解與空白,但 不會 變動識別字、不會 重新排序、不會 inline。字串、template literal、regex,以及授權 banner 註解(/*! ... */)會原封保留。輸出對等於原始語意。

美化混淆 / 壓縮過的程式碼

把單行的 minified bundle 貼進來,按 Beautify,得到可讀的縮排版本 — 適合審查第三方腳本、debug production stack trace,或是學習別人的好程式碼。

一眼看到體積差

每次 Minify 都顯示 bytes-in → bytes-out 差異與節省百分比。CSS bundle 到底有沒有變小?一目了然。

保護隱私

你的程式碼留在你的裝置上。tokenizer、minifier、beautifier 全部以 JavaScript 在本地執行。打開 DevTools → Network 即可驗證沒有任何對外請求。

輕量且快速

純 JavaScript,無框架運行時。冷啟動 gzip 後不到 25 KB。一般筆電上,200 KB 的 JS bundle 50 毫秒內完成 Minify。

如何 Minify 或 Beautify JS / CSS

從原始程式碼到可上線的輸出,三個步驟。

  1. 1

    貼上你的程式碼

    把 JavaScript 或 CSS 丟到 Input 面板。工具會自動偵測語言 — 如果原始碼模糊不清(例如只是片段),也可以從 Language 下拉選單手動指定。

  2. 2

    選 Minify 或 Beautify

    按 Minify 移除註解與空白以利上線;按 Beautify 把混淆 / 單行程式碼展開成正確的縮排格式。每次點擊都即時重跑 — 兩邊切換比較很方便。

  3. 3

    複製或下載

    用複製圖示把結果丟到剪貼簿,或用下載圖示存成 output.min.js / output.min.css / output.beauty.js / output.beauty.css。體積差(bytes in → out、節省百分比)讓你一眼看到實際壓縮多少。

為日常 web 開發而生

四種常見場景 — 在這些情況下,瀏覽器內隱私優先工具比把程式碼貼到隨便的線上 minifier 安全多了。

HTML email 或靜態網站的 inline 腳本

靜態頁、交易型 email 模板、嵌入 snippet 經常需要單行 inline 腳本或樣式。把可讀原始碼貼進來、Minify、把結果貼到 <style> 或 <script> 標籤裡 — 完成。

審查不信任的第三方腳本

Vendor pixel、廣告 beacon、可疑擴充功能 — 都以單行 minified 形式發送。貼進來、按 Beautify、看清楚他們到底在做什麼,再決定要不要嵌入 production。

CMS 主題的快速 CSS 審計

WordPress / Shopify / Ghost / Webflow 的主題經常 CSS 過於膨脹。貼上 stylesheet、Beautify、掃描重複規則與沒用到的 selector。整理完再 Minify 回單行。

不能進雲端服務的敏感程式碼

含 API key、機密、商業邏輯的內部腳本 — 任何不能貼到雲端 minifier 的程式碼。瀏覽器內工具讓每一個位元組都留在你的筆電上。打開 DevTools → Network 驗證沒有東西外洩。

100% 私密 — 在瀏覽器中運算

你的程式碼永遠不會離開你的裝置。打開 DevTools → Network,Minify 或 Beautify 過程中沒有任何對外請求。

  • tokenizer、minifier、beautifier 全部以 JavaScript 在你的機器上執行 — 沒有 Terser、沒有 esbuild、沒有第三方 API。
  • 授權 banner 註解(/*! ... */)預設保留,你不會不小心把開源函式庫授權所要求的 attribution 給去掉。
  • 無需登入、不對程式碼內容埋點。只用一個 cookie 記錄 cookie 同意狀態,以及一個 cookie 記錄語言偏好。

相關文章

為 JS / CSS 壓縮、程式碼格式化、bundle 體積管理精選的實用文章。

常見問題

Minifier 壓縮到什麼程度?

保守。我們移除註解與空白,但 不會 變動識別字(foo 還是 foo)、不會 做 dead-code elimination、不會 重新排序語句。目標是安全、可預測的位元組減量。如果你要極致壓縮,把輸出再丟進 Terser 或 esbuild 做最後一道工。

我的字串、template literal、regex 會壞掉嗎?

不會。tokenizer 會辨識字串、template literal、regex 的語法情境。"..."、'...'、\`...\`、/regex/flags 內部的空白與看似註解的字串都會原封保留。授權 banner 註解(/*! ... */)也會被保留。

CSS Minifier 支援巢狀規則與 @media 嗎?

支援。巢狀規則、@media、@keyframes、@font-face、@layer、@container、@supports、CSS custom properties(--var)都能安全壓縮。逗號分隔的 selector list 會保留;只有不必要的空白會被收掉。

可以把單行的 minified bundle 美化回來嗎?

這正是 Beautify 的用途。把任何壓縮過的 JS 或 CSS 貼進來、按 Beautify,得到重新縮排的版本。Beautifier 不改變語意 — 它只依括號深度加上換行與縮排。任何合法輸入都能處理,不管是哪種 minifier 壓出來的。

資料會傳到伺服器嗎?

不會。tokenizer、minifier、beautifier 全部以 JavaScript 在你的裝置上執行。打開 DevTools → Network 即可驗證壓縮 / 美化過程沒有任何對外請求。貼 API key、機密、專屬程式碼進來都安全 — 沒有任何位元組離開你的筆電。