JavaScriptミニファイア
JavaScriptファイルを圧縮し、削減量をその場で確認できます。
0元のサイズ
0圧縮後
0%削減量
ブラウザ内で動作します。入力した内容はどこにも送信されません。
- 変数名を短縮
- 削減バイト数を表示
- アップロードなし
JavaScriptの圧縮方法
- JavaScriptを貼り付けます。
- 読みやすさを保ちたい場合は「圧縮」や「変数名を短縮」をオフにします。
- 圧縮後のファイルをコピーまたはダウンロードします。
圧縮と変数名短縮がそれぞれ行うこと
| オプション | 行うこと |
|---|---|
| 圧縮（Compress） | 使われないコードを削除し、式を単純化 |
| 変数名を短縮 | ローカル変数をa、b、cのような短い名前に変更 |
どちらの場合も変わらないもの
- 外部から見た動作：同じ入力からは同じ出力が得られます。
- ユーザーに表示されるテキストを含む、コード内のすべての文字列。
- 処理が実行される順序。
- /*! ... */形式のコメント。Terserは標準でこの形式を保持し、多くのライブラリがライセンス表記に使う慣習だからです。
JavaScriptを圧縮するコツ
- 本番環境のエラーを読めるように、圧縮していないコピーを残すか、ビルドツールでソースマップを生成しましょう。
- 他の開発者が読むライブラリでは「変数名を短縮」をオフにし、エラーメッセージに意味のある名前が残るようにしましょう。
- 広く使われているミニファイアでも稀なエッジケースはあり得るため、公開前に圧縮後の出力に対してテストを実行しましょう。
JavaScriptミニファイアのFAQ
圧縮後のJavaScriptは有効なコードのままですか？
はい。名前が短くなり余分な空白がなくなるだけで、元のコードと全く同じように動作します。
JavaScriptは通常どのくらい小さくなりますか？
元のコードにあるコメントや長い変数名の量にもよりますが、多くの場合30〜60%小さくなります。
コードに構文エラーがあるとどうなりますか？
エラーが発生した行と列とともに表示されるため、修正してもう一度試せます。
「圧縮（Compress）」と「変数名を短縮」の違いは何ですか？
圧縮はコードを書き換えて、使われない分岐を削除したり式を単純化したりします。変数名を短縮は、ローカル変数を1文字の名前に変えます。どちらか一方だけをオフにすることもできます。
asyncやアロー関数のような最新の構文も圧縮できますか？
はい。オプショナルチェイニングやasync/awaitなど、ES2020以降の構文も含めて対応しています。
どのミニファイアを使っていますか？
UglifyJSの標準的な後継であるTerserを使っています。webpack、Rollup、esbuildなど、ほとんどのバンドラーがデフォルトで使うミニファイアです。
圧縮によってコードが壊れることはありますか？
通常のコードでは動作が変わることはありません。ただし、非標準的なイントロスペクションの手法などで、実行時に関数や変数の元の名前を読み取るコードは、名前が短縮されると壊れる可能性があります。該当する場合は「変数名を短縮」をオフにしてください。
TypeScriptの構文にも対応していますか？
いいえ、通常のJavaScriptのみを想定しています。TypeScriptの型注釈は有効なJavaScriptではないため、ここでは構文エラーになります。先にTypeScriptをJavaScriptにコンパイルしてください。