JavaScriptを圧縮
ビルドツールが使うのと同じ種類のミニファイアが、このページの中で動作します。最新の構文やモジュールも理解し、ソースコードは保存されません。
- 保存しません
- 順番待ちなし
- 登録不要・透かしなし
圧縮したJavaScriptがここに表示されます。
使い方
JavaScriptを貼り付け
またはファイルをドロップします。モジュール、クラス、最新の構文にすべて対応しています。
オプションを選択
ローカル変数の名前の短縮、consoleの呼び出しの削除、ライセンスのコメントの保持は、それぞれ個別にオン・オフできます。
コピーまたはダウンロード
圧縮前と圧縮後のサイズも表示されます。
名前の短縮、削除、そして絶対に触れてはいけないもの
処理は3つあり、後のものほど削減量も大きく、代償も大きくなります。空白とコメントの削除は、代償なしです。デッドコード、つまり決して実行されない分岐や、代入されたまま読まれない変数も削除します。そして ローカルの名前を短縮 するので、丁寧に名付けた calculateMonthlyTotal が1文字になります。削減の大半はこの最後の処理によるもので、出力が読めなくなる原因もこれです。配布には問題ありませんが、デバッグには役立ちません。
外部から名前で参照されるものは、名前を変えられません。 ここを誤ると、ミニファイアはコードを壊します。エクスポートされた関数、文字列でアクセスされるオブジェクトのプロパティ、window 経由で参照されるもの、eval で使われる名前は、どこか別の場所があなたの書いた名前で探しに来るので、そのまま残す必要があります。特にプロパティはデフォルトで変更しません。user.emailAddress の名前を変えると、そのオブジェクトがJSONにシリアライズされたり、別途ミニファイされたコードから読まれたりした瞬間に壊れてしまいます。
ソースマップか元のファイル を残しておいてください。名前が消えてしまうと、実際のユーザーから届いたスタックトレースは「関数 t の48,213文字目でエラー」としか読めず、何の手がかりにもなりません。ソースマップがあれば、デバッガーやエラー報告で元の名前と行番号が復元されます。ソースマップは別ファイルとして配布され、誰かが開発者ツールを開いたときにしか読み込まれないので、生成しても何の負担にもなりません。
ライセンスのコメントをデフォルトで残すのは、好みの問題ではなく法的な理由によるものです。 多くのオープンソースコードは、著作権表示を一緒に含めることを唯一の条件として、寛容なライセンスで提供されています。MITとBSDはどちらもそう明記しています。サードパーティのコードを含むバンドルからこれらのコメントを削除すると、そのコードの利用を許可しているライセンスに違反することになります。数百バイトにすぎません。
ほかの目的には
これはブラウザのタブではなくビルドに組み込むべき作業で、最近のバンドラーは当然のように行います。esbuild --minify や Rollup、Vite はビルド時にミニファイし、ソースマップを自動生成します。そして何より重要なことに、ツリーシェイキング によって、依存ライブラリのうちインポートしていないエクスポートを取り除きます。実際のアプリケーションでは、完成したファイルをミニファイするよりもはるかに大きな削減になります。
最適化する前に、まず測定してください。バンドルアナライザーを使うと、たいていは1つの大きな依存ライブラリがファイルの大部分を占めていることが分かります。日付ライブラリ、アイコンセット、グラフ1つのために丸ごと取り込んだチャートパッケージなどです。それを置き換えるか遅延読み込みにするほうが、どれだけミニファイするよりも効果があり、ページに必要なものだけを読み込む コード分割 はその両方に勝ります。
よくある質問
コードはどこかに保存されますか？
いいえ。ソースコードにとっては、そこがまさに肝心な点です。何も保存されず、サーバーがコードを目にすることもありません。社外秘のソースコードを、どこかに送信するオンラインのミニファイアに貼り付けるのは、サイトが保存期間について何と言っていようと情報の開示にあたります。しかも、急いでいるときに深く考えずにやってしまいがちな行為です。
ビルドツールのミニファイアと同じものですか？
ほぼ間違いなく同じです。webpack、Rollup、Viteをはじめ、ほとんどのバンドラーが使うのと同じ種類のミニファイアです。違いは、インストールして使うのではなく、ここで動作するという点だけです。
コードの動作が変わることはありますか？
変わらないはずですし、それを前提にするのではなく確認しています。私たちのテストでは、モジュールをミニファイし、元のバージョンとミニファイ後のバージョンの両方をインポートして実行し、結果を比較しています。実際に変わるのは、ローカル変数の名前（オフにしない限り）、事前に計算できる定数式、そしてデッドコードです。実行時に関数の名前やFunction.prototype.toStringに依存しているものは、名前の短縮で壊れることがあります。どちらかに依存している場合は、名前の短縮をオフにしてください。
「モジュールとして解析」とは何ですか？
コードをESモジュールとして解析するか、通常のスクリプトとして解析するかの設定です。モジュールではimportとexportが使え、常にstrictモードになります。最近のコードの大半がモジュールなので、デフォルトでオンにしています。ファイルが「with」を使っていたり、非strictモードの挙動に依存していたりする古いスタイルのスクリプトなら、オフにしてください。
consoleの呼び出しは削除すべきですか？
本番用なら、通常は削除したほうがよいでしょう。ノイズになるうえ、開発者ツールを開いた人に内部の情報を漏らすおそれがあるからです。デフォルトでオフにしているのは、頼まれてもいないのにコードを黙って削除するのは、ツールがすべきことではないからです。
ライセンスのコメントは残りますか？
はい、デフォルトで残ります。/*! で始まるコメントと、@licenseまたは@preserveを含むコメントは残します。他人のMITライセンスのライブラリからこれらを削除するのはライセンス違反になるからです。通常のコメントは削除します。
ソースマップを生成できますか？
このページではできません。ソースマップは既知のURLにある元のファイルと一緒になって初めて役に立つもので、貼り付けてコピーするタイプのツールには向きません。それはビルドツールで行うのが適切です。
サイズの上限はありますか？
決まった上限はありません。数千行なら1秒もかからずにミニファイできます。非常に大きなバンドル済みファイルは、名前を短縮する前に全体を解析するため、時間がかかります。本番用のバンドル全体をミニファイするなら、ビルドツールのほうが適しています。このページは、単一のファイルや手早い確認のためのものです。
ご注意： ローカル変数の名前を短縮するとファイルは小さくなりますが、出力は読めなくなります。配布には問題ありませんが、デバッグには役立ちません。ソースマップか元のファイルを残しておいてください。ライセンスのコメントはデフォルトで残します。削除すると、利用を許可されているコードのライセンスに違反するおそれがあるためです。
このツールをあなたのサイトに設置
ブログ、授業のページ、ヘルプ記事などに無料で設置できます。コードを1つ貼り付けるだけで、訪問者がそのページ上でツールを使えるようになります。