このJavaScriptミニファイアの主な機能
- ブラウザ内での即時JS圧縮(サーバーへのファイルアップロード不要)
- コメントの削除と不要な空白・改行の圧縮
- Terserに似たASTベースの圧縮(定数畳み込み、安全な条件下でのデッドコード削除)
- APIまたはビルド統合によるオプションの識別子マングリングと高度なフラグ
- モダンなJavaScript(ES2015+)、クラシックスクリプト、シンプルなモジュール出力に対応
- ミニファイされたJavaScriptのワンクリックコピーまたはダウンロード
- JavaScriptフォーマッターと同じコアコンポーネントを使用:1アクションでフォーマット済み出力とミニファイ出力を切り替え
- 最大限のプライバシー保護のため100%クライアント側処理
🛠️ JavaScriptのミニファイ方法 for javascript-minifier
JSを貼り付けるかアップロード
.js/.mjsファイルをエディターにドロップするか、JavaScriptを直接貼り付けます。単一スクリプト、ユーティリティファイル、小規模バンドルに最適です。
ミニファイモードを選択
JavaScriptフォーマッターと同じコンポーネントを使用:ミニファイアクションに切り替えて、フォーマット済みコードではなく圧縮された出力を取得します。
ミニファイアを実行
コードはASTに解析され、コメントと余分な空白が除去され、安全な圧縮処理が適用されてバンドルサイズが削減されます。
結果をコピーまたはダウンロード
出力エディターからミニファイされたJavaScriptをコピーするか、.min.jsファイルとしてダウンロードし、HTML、CDN、またはビルド出力に含めます。
技術仕様
コア変換(安全なデフォルト設定)
保守的なデフォルト設定は、ランタイム動作を維持しながらコードサイズを大幅に縮小するように設計されています。
| 操作 | 適用 | 備考 |
|---|---|---|
| 行コメントとブロックコメントの削除 | ✅ | ライセンスコメント(/*! ... */)は設定/APIで保持可能 |
| 空白と改行の圧縮 | ✅ | 意味的に安全な場合に空白を正規化。文字列と正規表現の内容は保持 |
| 定数畳み込みと単純なインライン化 | ✅ | 結果が証明可能に等価な場合のみ |
| デッドコード削除 | ✅ | 定数伝播後に到達不能なブランチを削除 |
| 識別子の短縮 | ✅ オプション | 変数名と関数名を短縮。詳細オプション/APIで設定可能 |
| デバッグヘルパーの削除(console/debugger) | ✅ オプション | 本番環境でconsole出力に依存しない場合に有効化可能 |
安全性と互換性の制御
詳細オプション(主にビルドツール/API経由で公開)により、最小化の積極性を調整できます。
| オプション | デフォルト | 説明 |
|---|---|---|
| ECMAターゲット | 2020 | 出力構文と一部の圧縮ルールを制御 |
| モジュール vs スクリプト | スクリプト | ESMバンドル向けにモジュール/トップレベル最適化を有効化 |
| keep_fnames / keep_classnames | false | スタックトレースやDIフレームワーク向けに名前を保持 |
| safari10 / レガシークワークス | オフ | 特定のレガシーエンジンを対象とする場合のみ有効化 |
| toplevel | false | 高度なツリーシェイキング向けに未使用のトップレベルバインディングの削除を許可 |
典型的なサイズ削減率
削減効果は、元のフォーマット、コメント密度、デッドコードの量によって異なります。
| 入力スタイル | 圧縮のみ | 圧縮 + 難読化(積極的) |
|---|---|---|
| 大量のコメントとスペースを含む | 35%–55% | 50%–70% |
| 適度にフォーマットされたアプリケーションコード | 20%–35% | 35%–55% |
| 既にコンパクトなコード | 5%–15% | 10%–25% |
プロダクションビルド用CLI代替手段
完全なアプリケーションやマルチファイルプロジェクトの場合、CI/CDパイプラインに縮小化を統合してください。
Node.js
Terser(一般的なケース)
npx terser src/app.js -o dist/app.min.js -c ecma=2020,passes=2 -m2回の圧縮パスと識別子の難読化により、強力なサイズ削減を実現。
予約名とdrop_console付きTerser
npx terser src/app.js -o dist/app.min.js -c passes=2,drop_console=true -m reserved=["React","ReactDOM"] --keep-fnames重要なグローバル変数を保護し、console呼び出しを削除、デバッグ用に関数名を保持。
Linux/macOS/Windows
esbuild(非常に高速)
npx esbuild src/app.js --minify --target=es2018 --outfile=dist/app.min.jsバンドルと縮小化を単一の非常に高速なステップで実行。
SWC(Rustベース)
npx swc src -d dist --minify高性能なRustエンジンでトランスパイルと縮小化を実行。
一般的なユースケース
Webパフォーマンス & Core Web Vitals
- JavaScript転送サイズを削減し、LCPとTTIを高速化
- デプロイ前にデバッグコメントとロギングを削除
- gzip/brotli圧縮前にクライアントサイドバンドルを縮小
/* 縮小化出力で除去されるビルド専用コメント */CI/CDとリリース自動化
- ビルドパイプラインの最終ステップとしてJSを縮小化
- CDN用に小さくキャッシュフレンドリーなバンドルを準備
- HTML/CSS縮小化ツールと共にプロダクション対応アセットを生成
ウィジェット、埋め込み & 実験
- タグマネージャー経由でコンパクトなスニペットを配信
- サードパーティページにミニファイされたウィジェットを埋め込み
- 重要なスクリプトで様々な圧縮戦略を実験
❓ Frequently Asked Questions
JavaScriptのミニファイはコードの実行方法を変更しますか?
このツールはTypeScriptやJSXを直接処理しますか?
私のJavaScriptはサーバーにアップロードされますか?
JavaScriptファイルの最大サイズはどのくらいですか?
フォーマットとミニファイの違いは何ですか?
Pro Tips
バンドラーでNODE_ENV=production(または同等の設定)を定義すると、多くのライブラリで追加のデッドコード除去が有効になります。
非ミニファイソース(および大規模アプリの場合はソースマップ)をバージョン管理で保持し、本番環境ではミニファイ済みアセットのみを配信してください。
難読化時に予約名を使用して、windowやglobalThisに公開されるAPIを保護してください。
ミニファイをCDNまたはサーバーレベルでのgzipまたはbrotliと組み合わせて、サイズ削減効果を倍増させてください。
Additional Resources
Other Tools
- CSSビューティファイア
- HTMLビューティファイア
- JavaScriptビューティファイア
- PHPビューティファイア
- カラーピッカー
- スプライト抽出ツール
- Base64デコーダー
- Base64エンコーダー
- C#フォーマッタ
- CSVフォーマッタ
- Dockerfile Formatter
- Elmフォーマッタ
- ENVフォーマッタ
- Goフォーマッタ
- GraphQLフォーマッタ
- HCLフォーマッタ
- INIフォーマッタ
- JSONフォーマッタ
- LaTeXフォーマッタ
- Markdownフォーマッタ
- Objective-Cフォーマッタ
- Php Formatter
- Protoフォーマッタ
- Pythonフォーマッタ
- Rubyフォーマッタ
- Rustフォーマッタ
- Scalaフォーマッタ
- シェルスクリプトフォーマッタ
- SQLフォーマッタ
- SVG フォーマッタ
- Swift フォーマッタ
- TOML フォーマッタ
- Typescript Formatter
- XML フォーマッタ
- YAML フォーマッタ
- Yarn フォーマッタ
- CSSミニファイア
- Html Minifier
- JSONミニファイア
- XML ミニファイア
- HTTPヘッダービューア
- PDFからテキストへ
- 正規表現テスター
- SERPランクチェッカー
- Whois ルックアップ