HTML・CSS・JS ミニファイ

コードをミニファイする手順

1. HTML、CSS、JavaScript のいずれかを貼り付けます。言語は自動で判別しますが、自分で指定もできます。
2. ミニファイした結果が下に出て、前後のサイズと削減率も表示されます。
3. コピーするか、.min ファイルとしてダウンロードします。

よくある質問

具体的に何が削除されますか?

コメントと無駄な空白です。CSS では波かっこ、セミコロン、カンマ、コロンの隣の空白と、各ブロック最後のセミコロンが落ちます。HTML では連続する空白が1つになり、コメントが落ちます。JavaScript ではコメントとインデントが落ちます。

JavaScript の改行が残るのはなぜですか?

改行を消すと動作が変わりうるからです。JavaScript は行末にセミコロンを補うため、それに頼っていた2行をつなぐと壊れます。削除するのはインデント、空行、コメントだけで、これはどんなコードでも安全です。

ビルドツールのように変数名を短くしますか?

しません。名前を短くしたり式を書き換えたりするには本物のパーサーが必要で、それは esbuild や terser、SWC といったバンドラーの仕事です。この道具は手作業でファイルを削るためのもので、削減はおおむね10〜30%です。

文字列や正規表現があっても安全ですか?

安全です。スキャナーが引用符、テンプレートリテラル、正規表現リテラルを追うので、文字列の中のコメント記号や正規表現の中のスラッシュには手を付けません。

HTML のタグ間の空白が残るのはなぜですか?

インライン要素の間の空白はページ上で見えるため、消すと単語がくっついてしまいます。マークアップがすべてブロック要素で、空白を消したい場合は2つ目の項目にチェックを入れてください。

gzip がすでにやってくれているのでは?

おおむねそうです。gzip や Brotli で圧縮するサーバーは繰り返しの空白をすでに潰すので、先にミニファイしてもバイト数が示すほどには効きません。それでも、埋め込みコード、メールのテンプレート、圧縮なしで配信されるファイルには役立ちます。

コードはアップロードされますか?

いいえ。テキストはブラウザの中で処理され、どこにも送信されません。