JavaScript ミニファイアー
本番環境向けに JavaScript を瞬時に縮小
元の JavaScript
オプション
圧縮済み JavaScript
概要
JavaScript ミニファイアーは、コードからコメント、不要な空白、改行を削除して、本番環境向けにファイルサイズを削減します——ダウンロードが小さくなり、パース時間が短縮されます。読みやすい JS を貼り付けると、コンパクトな出力がすぐに得られ、前後のサイズ比較もリアルタイムで表示されます。
このミニファイアーが制御する内容
- •コメント削除:// 行コメントと /* ブロック */ コメントの両方を削除
- •空白の圧縮:不要なスペース、空行、改行を削除
- •サイズ比較:元のサイズ、圧縮後のサイズ、削減率を並べて表示
- •セミコロンの正規化:空白削除後も文の区切りが維持されるようにします
- •コメント保持の切り替え:必要に応じてライセンスヘッダーや重要なコメントを保持
- •ダウンロード可能な出力:圧縮結果を .js ファイルとして直接保存
JavaScript を圧縮する場面
- •ページ読み込み時間を短縮するために、本番環境へのデプロイ前にスクリプトを縮小する
- •HTML ページに肥大化させずにインラインで埋め込む小さなユーティリティスクリプトを準備する
- •フルビルドパイプラインを構築する前に、ファイルがどれだけ縮小するかを素早く確認する
- •ビルドステップが現実的でない CodePen、gist、ブックマークレット向けに一度限りのスクリプトを圧縮する
- •パフォーマンス監査のためにサイズ予算と圧縮後のサイズを比較する
JavaScript を圧縮する方法
- 1.JavaScript を入力エディタに貼り付けるか、.js ファイルをアップロードします
- 2.コメント(ライセンスヘッダーなど)を保持するか、完全に削除するかを決めます
- 3.圧縮された出力とサイズ削減率が自動的に表示されます
- 4.出力をコピーするか、.js ファイルとしてダウンロードします
- 5.デプロイ前に前後のバイト数を確認してサイズ削減効果を確かめます
知っておくべきエッジケース
- •このミニファイアーは変数をより短い名前に変更したり、デッドコード除去を行ったりしません——最大限の圧縮には Terser のような AST ベースのツールが必要です
- •文字列の内容やテンプレートリテラルはそのまま残されます。削除されるのは文字列の外にある構造的な空白とコメントのみです
- •珍しいコード(( や [ で始まる行など)における ASI(自動セミコロン挿入)のエッジケースは、圧縮後にテストする必要があります。改行の削除が ASI の挙動をまれに変えることがあるためです
制限事項
- •これは空白・コメントの圧縮であり、完全な圧縮ではありません——最大限のサイズ削減(変数のリネーム、デッドコード除去、tree-shaking)には、Terser や esbuild のようなビルドツールに統合された圧縮ツールを使用してください
- •圧縮された出力は可読性を完全に失います——元のソースは必ずバージョン管理下に保管してください
- •非常に大きなファイルはブラウザで完全に処理するのに時間がかかる場合があります——本番のビルドパイプラインでは、一度限りのブラウザツールではなく、バンドラーに圧縮を組み込んでください
逆方向の操作が必要ですか?
圧縮された JavaScript があり、それを読んだりデバッグしたりする必要がある場合は、JavaScript ビューティファイアーをご利用ください。インデント、改行、一貫したフォーマットを復元し、コードを実際に読めるようにします。