JavaScript Minifier / Beautifier

How to Use the JavaScript Minifier / Beautifier

This free online JavaScript tool lets you minify or beautify your JS code instantly in your browser. Select "Minify" to compress your code by removing comments, whitespace, and unnecessary characters. Select "Beautify" to format compressed JavaScript with proper indentation and line breaks.

JavaScript Minification

• Removes single-line comments (// ...) and multi-line comments (/* ... */)
• Collapses unnecessary whitespace and empty lines
• Removes spaces around operators and punctuation
• Displays character count comparison and size savings
• Preserves string literals to prevent breaking your code

JavaScript Beautification

The beautify mode transforms minified JavaScript into readable, well-formatted code. It adds line breaks after semicolons and braces, applies consistent indentation based on code block depth, and respects string literals. This is perfect for reading and debugging minified code from production sources.

When to Minify JavaScript

JavaScript minification is a standard practice for production deployments. Minified JS files are smaller and load faster, improving page performance and Core Web Vitals scores. Most build tools (Webpack, Vite, esbuild) automatically minify JS, but this tool is handy for quick one-off minification, testing, or when you need to minify standalone scripts.

What This Tool Does Not Do (No Obfuscation)

This is a whitespace-and-comment minifier, not an obfuscator. It does not rename (mangle) variables, inline functions, or remove dead code, and it never makes your logic harder to read on purpose — anyone can restore readable structure with the Beautify mode. Do not use minification to hide API keys or business rules. If you need variable mangling or tree-shaking for production bundles, use an AST-based tool such as Terser, esbuild, or SWC, and use this page for quick one-off jobs and inspection instead.

JavaScript Minifier / Beautifierの使い方

このツールはJavaScriptコードの圧縮(ミニファイ)と整形(ビューティファイ)をブラウザ上で実行します。圧縮モードではコメントや不要な空白を削除してファイルサイズを削減し、整形モードでは圧縮されたコードを読みやすいフォーマットに変換します。すべての処理はクライアントサイドで行われます。

活用例1: ビルドツールを通さないスクリプトの軽量化

Google Tag Manager のカスタムHTMLタグ、CMSに直接貼るインラインスクリプト、LPの埋め込みコードなど、Webpack や Vite を通さない「一回限りのJS」の圧縮に向いています。数KBのスニペットでも、コメントと空白を落とすだけで20〜40%程度サイズが減り、HTML内に貼り付けたときの見通しも良くなります。

活用例2: 本番バンドルの応急読解

障害調査で本番環境の圧縮済みコードを読む必要があるのに、ソースマップが手元にない。そんなとき整形モードが役立ちます。ブレースとセミコロンを基準に改行・インデントを復元するので、スタックトレースの該当箇所を目視で追えるようになります。ただし短縮された変数名は元に戻らないため、完全な復元にはソースマップが必要です。

活用例3: 圧縮効果の事前見積もり

圧縮後に表示される「Saved %」で削減率を即確認できます。コメントやインデントが多い手書きコードほど効果が大きく、すでに詰まったコードでは数%しか減りません。Terser などの本格的なミニファイアを導入する前に、そもそも空白・コメント除去だけでどの程度減るのかを把握する最初の目安として使えます。

よくあるエラーと対処 / Common Errors and Fixes

本ツールのような正規表現ベースの簡易ミニファイアには明確な限界があります。圧縮後にコードが壊れる・挙動が変わる典型パターンと対処をまとめました。

Regex-based minifiers like this one have known limitations. Here are the typical ways minified code breaks, and how to fix each case.

言語別コード例 / Code Examples by Language

JS圧縮をビルドパイプラインに組み込む場合の最小サンプルです。いずれもASTベースのため、正規表現ベースの本ツールより安全に圧縮できます。

Minimal snippets for minifying JavaScript in a build pipeline. All of these are AST-based and safer than regex minification.

JavaScript / TypeScript (Terser)

// npm install terser
import { minify } from "terser";

const result = await minify(code, {
  compress: true,
  mangle: true, // 変数名の短縮 / shorten variable names
  format: { comments: /^!/ }, // /*! */ ライセンスは保持 / keep license banners
});
console.log(result.code);

Shell (esbuild / Terser CLI)

# esbuild: 高速。--legal-comments でライセンス保持
npx esbuild app.js --minify --legal-comments=inline --outfile=app.min.js

# terser: 圧縮率重視
npx terser app.js --compress --mangle -o app.min.js

Python (rjsmin)

# pip install rjsmin
from rjsmin import jsmin

with open("app.js", encoding="utf-8") as f:
    minified = jsmin(f.read())

with open("app.min.js", "w", encoding="utf-8") as f:
    f.write(minified)

Go (tdewolff/minify)

import (
    "github.com/tdewolff/minify/v2"
    "github.com/tdewolff/minify/v2/js"
)

m := minify.New()
m.AddFunc("text/javascript", js.Minify)
out, err := m.String("text/javascript", src)

Before / After 実例 / Before & After

例1: コメント・空白の除去(圧縮) / Strip comments and whitespace

// 小計を計算する
function sum(items) {
  /* 単価 x 数量 */
  return items.reduce((acc, x) => acc + x.price * x.qty, 0);
}

↓

function sum(items){return items.reduce((acc,x)=>acc+x.price*x.qty,0)}

例2: 圧縮済みコードの整形 / Beautify minified code

function greet(name){if(!name){return "guest";}return "Hello, "+name;}

↓

function greet(name) {
  if(!name) {
    return "guest";
  }
  return "Hello, "+name;
}

例3: ASIによる挙動変化(要注意) / ASI hazard

function getConfig() {
  return
  { mode: "dark" }
}

↓

function getConfig(){return{mode:"dark"}}

元のコードはASIにより return; と解釈され undefined を返しますが、圧縮後はオブジェクトを返します。改行に依存したコードは圧縮で挙動が変わる典型例です。

The original returns undefined because ASI inserts a semicolon after return; the minified version returns the object. Newline-dependent code is the classic minification hazard.

Why browser-only? / なぜブラウザ完結か

JavaScript source code is often more sensitive than the data it processes. Unreleased features, internal API endpoints, feature-flag conditions, pricing logic — pasting that into a server-hosted minifier hands your implementation to a third party before it ever ships. DevToolBox performs minification and beautification entirely in your browser with plain string transformations: no upload, no server-side processing, no logging. You can confirm this yourself — open DevTools, switch to the Network tab, run the tool, and no request appears. One related caution: minification is not protection. Anyone can paste your production bundle into the Beautify mode of this very page and read the structure back. Never embed API keys, credentials, or secret business rules in client-side JavaScript, no matter which minifier you use.

JavaScriptのソースコードには、未公開機能、社内APIのエンドポイント、料金計算ロジックなど、扱うデータ以上に機密性の高い情報が含まれがちです。本ツールは圧縮・整形をすべてブラウザ内で完結させており、コードがサーバーに送信されることはありません。DevTools の Network タブで通信が発生しないことを確認できます。なお、圧縮は保護ではありません。整形モードを使えば誰でも構造を復元できるため、APIキーや秘密のロジックをクライアントサイドJSに埋め込まないでください。