跳到工具區
Web 開發

JavaScript 格式化與壓縮工具

在瀏覽器本機以 Prettier 整理 JavaScript,或用 Terser 壓縮並重新命名區域變數;只解析與改寫原始碼,不會執行。

Web Worker 僅在本機處理工具
輸入0 個字元
結果0 個字元
就緒

靜態解析與改寫 · 不執行程式碼

只解析、排版與壓縮;不執行,也不做型別檢查。

格式化與診斷使用 Babel 或 Babel-Flow parser;Minify 則直接交給 Terser,Flow 型別語法不在其輸入範圍。兩條路徑都不會 eval、import 或執行你貼上的程式碼,也不會驗證執行結果。

01

JavaScript 原始碼

02

依操作選擇 parser

03

建立語法樹,不執行

04

Prettier 或 Terser 輸出

執行程式碼沒有路徑

不呼叫 eval 或 Function constructor,不匯入使用者 module、不注入 DOM,也不觸發原始碼裡的網路請求或其他 runtime side effect。

語法通行證

Parser 選項只影響格式化與診斷。

Babel 適合現代 JavaScript;Babel-Flow 額外辨識 Flow annotation,但不執行 Flow type checker。Minify 使用 Terser 自己的 JavaScript parser,含 Flow 型別的輸入會失敗。

ES moduleexport { load } from './api.js'Babel · Babel-Flow
async / awaitconst value = await load()Babel · Babel-Flow
Optional chainingprofile?.team?.nameBabel · Babel-Flow
Class fieldclass Store { ready = false }Babel · Babel-Flow
Template literal/RegExp`/users/$` · /a+b/giBabel · Babel-Flow
Flow annotationfunction f(value: string): number僅 Babel-Flow;Terser 不接受

同一份原始碼,兩種輸出目的

格式化方便閱讀;壓縮為單一輸入縮小體積。

格式化

檢閱
export async function load(id) {
  const response = await fetch(`/items/${id}`);
  return response.json();
}
  • 保留識別字與註解,統一縮排、空白與換行
  • 可選 2/4 空格或 Tab;print width 是偏好值,不是硬上限
  • Prettier standalone 不讀取專案的 config、ignore 或額外 plugin

壓縮

交付前檢查
export async function load(t){const n=await fetch(`/items/${t}`);return n.json()}
  • Terser 固定執行兩輪 compress,可能移除、合併或改寫可判定的程式碼
  • mangle 預設開啟,只重新命名可處理的識別字;不是加密,也不啟用 property mangle
  • source map 只會以 data URL 內嵌;sourcesContent 可選擇是否放入完整輸入

壓縮風險清單

Terser 的最佳化假設,需要用真實程式流程驗證。

直接 eval/反射名稱字串程式碼、Function.name 或 stack 可能依賴原始識別字Terser 預設避開 direct eval 可見名稱;仍應視情況關閉 mangle 並實測
動態 property外部協定可能透過字串 key 讀取物件欄位本站沒有開啟 property mangle;一般 mangle 不等於改名物件 key
授權註解發佈條款可能要求保留 copyright 或 license notice本站只保留 /*! 開頭的註解;其他授權文字請另外保存並核對
Module 模式行首 import/export 會自動啟用,也可手動開啟 strict 與 top-level 假設可能移除單一輸入內的未使用程式碼;不解析依賴,也不是 bundler 或跨 module tree shaking
Source map內嵌 map 會跟著輸出發布,sourcesContent 還能包含完整原始碼上線前檢查 data URL 與原始碼內容;source map 不是執行正確性的保證

Parser 錯誤記錄

遇到不合法的 token,只提供診斷,不嘗試執行。

Unexpected token,預期「)」· 第 2 行第 16 欄
const user = { name: 'Ada' };
if (user?.name {
  console.log(user.name);
}

條件以 ( 開始,卻在補上 ) 前先遇到 {。Prettier 的錯誤訊息會附行列與原始碼片段;本站的結構化 line/column 欄位不一定另有值,後續位置也可能只是連鎖錯誤。

直接回答

什麼是 JavaScript 格式化與壓縮工具?

在瀏覽器本機以 Prettier 格式化 JavaScript,或用 Terser 進行兩輪 compress 與可選 mangle;支援 Babel/Flow 排版與 inline source map,不會執行程式碼。

它能做什麼?

  • 格式化
  • 診斷
  • 壓縮

如何使用 JavaScript 格式化與壓縮工具

  1. 01

    選擇任務

    在工作區選擇格式化、診斷和壓縮。

  2. 02

    提供輸入

    const greet = (name) => console.log(`Hello, ${name}!`);。內容會留在瀏覽器端的處理流程中。

  3. 03

    檢查結果

    執行工具、檢查結果與診斷資訊;頁面提供複製或下載功能時,也能直接匯出。

常見問題

JavaScript 格式化與壓縮工具是什麼?
在瀏覽器本機以 Prettier 格式化 JavaScript,或用 Terser 進行兩輪 compress 與可選 mangle;支援 Babel/Flow 排版與 inline source map,不會執行程式碼。
JavaScript 格式化與壓縮工具能做什麼?
JavaScript 格式化與壓縮工具支援格式化、診斷和壓縮,所有模式都能直接在目前頁面使用。
JavaScript 格式化與壓縮工具會上傳我的資料嗎?
JavaScript 格式化與壓縮工具會在瀏覽器中處理輸入內容。DevSexy 不會增加上傳、登入或伺服器處理步驟。
DevSexy 會在瀏覽器中處理工具輸入:不追蹤貼上的內容、不需帳號,也不會上傳。