Loading…

概要 オンライン JavaScript ミニファイ

数秒で小さな JavaScript バンドルを出荷 ⚡。このオンライン JavaScript ミニファイは JS を AST に解析し、コメントと不要な空白を除去し、安全な圧縮処理を適用します。スタンドアロンスクリプトの縮小、クイックフィックス、タグマネージャースニペット、デプロイ前チェックに最適。すべて 100% クライアントサイドで実行 – コードがブラウザから流出することはありません。

このJavaScriptミニファイアの主な機能

  • ブラウザ内での即時JS圧縮(サーバーへのファイルアップロード不要)
  • コメントの削除と不要な空白・改行の圧縮
  • Terserに似たASTベースの圧縮(定数畳み込み、安全な条件下でのデッドコード削除)
  • APIまたはビルド統合によるオプションの識別子マングリングと高度なフラグ
  • モダンなJavaScript(ES2015+)、クラシックスクリプト、シンプルなモジュール出力に対応
  • ミニファイされたJavaScriptのワンクリックコピーまたはダウンロード
  • JavaScriptフォーマッターと同じコアコンポーネントを使用:1アクションでフォーマット済み出力とミニファイ出力を切り替え
  • 最大限のプライバシー保護のため100%クライアント側処理

🛠️ JavaScriptのミニファイ方法 for javascript-minifier

1

JSを貼り付けるかアップロード

.js/.mjsファイルをエディターにドロップするか、JavaScriptを直接貼り付けます。単一スクリプト、ユーティリティファイル、小規模バンドルに最適です。

2

ミニファイモードを選択

JavaScriptフォーマッターと同じコンポーネントを使用:ミニファイアクションに切り替えて、フォーマット済みコードではなく圧縮された出力を取得します。

3

ミニファイアを実行

コードはASTに解析され、コメントと余分な空白が除去され、安全な圧縮処理が適用されてバンドルサイズが削減されます。

4

結果をコピーまたはダウンロード

出力エディターからミニファイされたJavaScriptをコピーするか、.min.jsファイルとしてダウンロードし、HTML、CDN、またはビルド出力に含めます。

技術仕様

コア変換(安全なデフォルト設定)

保守的なデフォルト設定は、ランタイム動作を維持しながらコードサイズを大幅に縮小するように設計されています。

操作適用備考
行コメントとブロックコメントの削除ライセンスコメント(/*! ... */)は設定/APIで保持可能
空白と改行の圧縮意味的に安全な場合に空白を正規化。文字列と正規表現の内容は保持
定数畳み込みと単純なインライン化結果が証明可能に等価な場合のみ
デッドコード削除定数伝播後に到達不能なブランチを削除
識別子の短縮✅ オプション変数名と関数名を短縮。詳細オプション/APIで設定可能
デバッグヘルパーの削除(console/debugger)✅ オプション本番環境でconsole出力に依存しない場合に有効化可能

安全性と互換性の制御

詳細オプション(主にビルドツール/API経由で公開)により、最小化の積極性を調整できます。

オプションデフォルト説明
ECMAターゲット2020出力構文と一部の圧縮ルールを制御
モジュール vs スクリプトスクリプトESMバンドル向けにモジュール/トップレベル最適化を有効化
keep_fnames / keep_classnamesfalseスタックトレースやDIフレームワーク向けに名前を保持
safari10 / レガシークワークスオフ特定のレガシーエンジンを対象とする場合のみ有効化
toplevelfalse高度なツリーシェイキング向けに未使用のトップレベルバインディングの削除を許可

典型的なサイズ削減率

削減効果は、元のフォーマット、コメント密度、デッドコードの量によって異なります。

入力スタイル圧縮のみ圧縮 + 難読化(積極的)
大量のコメントとスペースを含む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 -m

2回の圧縮パスと識別子の難読化により、強力なサイズ削減を実現。

予約名と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を対象としています。TypeScriptやJSXの場合は、まずJavaScriptにトランスパイル(SWC、esbuildまたはBabel経由)し、生成されたJSコードをミニファイしてください。

私のJavaScriptはサーバーにアップロードされますか?

いいえ。すべての処理はクライアントサイドのコードを使用してブラウザ内で完全に行われます。ソースコードはリモートサーバーに送信されないため、非公開/独自スクリプトに最適です。

JavaScriptファイルの最大サイズはどのくらいですか?

スムーズなブラウザUXのため、このオンラインツールでは約1MBまでのファイルを推奨します。より大きなバンドルや繰り返しのミニファイ実行は、ビルドパイプラインに統合されたCLIツールで処理する方が適しています。

フォーマットとミニファイの違いは何ですか?

フォーマットはコードを読みやすくし(一貫したインデントとスペース)、ミニファイはコードを小さくします(空白、コメント、冗長なコードの削除)。このツールは両方に同じコアコンポーネントを共有しています:可読性にはフォーマットアクションを、本番バンドルにはミニファイアクションを使用してください。

Pro Tips

Best Practice

バンドラーでNODE_ENV=production(または同等の設定)を定義すると、多くのライブラリで追加のデッドコード除去が有効になります。

Best Practice

非ミニファイソース(および大規模アプリの場合はソースマップ)をバージョン管理で保持し、本番環境ではミニファイ済みアセットのみを配信してください。

Best Practice

難読化時に予約名を使用して、windowやglobalThisに公開されるAPIを保護してください。

Best Practice

ミニファイをCDNまたはサーバーレベルでのgzipまたはbrotliと組み合わせて、サイズ削減効果を倍増させてください。

Additional Resources

Other Tools