コードミニファイアー

JavaScript(Terser)、CSS(CSSO)、HTML、JSON、XML を 1 つのツールで圧縮。言語を選んでコードを貼り付けると、削減されたバイト数が分かります。無料でブラウザ内で動作。

出力

すべてブラウザ内で実行されます。データがアップロードされることはありません。

関連ツール

すべて表示

コードミニファイアーとは?

コードミニファイアーは、複数の言語を 1 か所で圧縮できるツールです。JavaScript、CSS、HTML、JSON、XML から選ぶと、適切なミニファイアーが適用され、元のサイズと圧縮後のサイズが表示されます。

コードミニファイアーの使い方

  1. 言語 を選びます。
  2. コードを入力欄に貼り付けます。
  3. 圧縮 をクリックします(入力中も出力は更新されます)。
  4. 圧縮されたコードをコピーまたはダウンロードします。

例

入力
a { color : red ; }
出力
a{color:red}

言語:CSS。

コードミニファイアーを使うべき場面

手早い 1 回限りの圧縮やサイズの比較に使います。本番のアプリケーションでは、ビルドパイプラインでソースマップ付きで圧縮してください。専用のミニファイアーのページでは、各エンジンをより詳しく説明しています。

コードミニファイアーの仕組み

各言語には専用のエンジンが使われます。JavaScript は圧縮とローカル名のマングリングを行う Terser、CSS は波括弧・文字列のチェックの後に CSSO による構造的なミニファイ、HTML はコメントを削除して空白をまとめつつ pre、textarea、script、style には触れない安全なミニファイアー、JSON は数値を保つ厳密な解析とコンパクトな出力、XML は整形式のチェックの後にタグ間の空白とコメントを削除します。

一般的な使用例

  • ページにインライン化する前にスニペットを圧縮する
  • 異なるバージョンのコードのサイズを比較する
  • JSON や XML のペイロードをコンパクトにする
  • コードを共有する前にコメントを削除する

セキュリティ注意事項

すべてブラウザ内でローカルに処理され、貼り付けたコードがアップロードされることはありません。

よくある質問

既定ではどの言語が選ばれていますか?

JavaScript です。言語 のセレクターで変更できます。

ソースマップは生成されますか?

いいえ。

TypeScript を圧縮できますか?

いいえ、先に TypeScript を JavaScript にコンパイルしてください。

おすすめの次のステップ

エスケープ/アンエスケープ
JSON、JavaScript、HTML、XML、URL コンポーネント、正規表現、SQL リテラル、CSS 文字列、シェル引数向けに、文字列をエスケープ・アンエスケープできる 1 つのツールです。
CSSセレクターテスター
貼り付けたHTMLに対してCSSセレクターをテストし、一致するすべての要素をマークアップとテキストとともに表示します。querySelectorAllを使うため、結果はブラウザと完全に一致します。
CSS box-shadowジェネレーター
CSSのbox-shadowを視覚的に作成します。複数レイヤーの重ね、オフセット、ぼかし、広がり、inset、RGBAの不透明度に対応し、ライブプレビューで見ながらコードをコピーできます。
CSSグラデーションジェネレーター
ドラッグできるカラーストップ、角度、繰り返しモード、OKLCH補間に対応した、線形・放射・円錐のCSSグラデーションを設計します。ライブプレビューで確認し、コードをコピーできます。
CSS Flexboxジェネレーター
flex-direction、wrap、justify-content、align-items、gapと、アイテムごとのflex、order、align-selfを視覚的に設定します。子要素のライブプレビューとコピー可能なCSS付きです。
CSS Gridジェネレーター
CSS Gridレイアウトを視覚的に作成します。grid-template-columns/rows、検証付きの名前付きエリア、gap、揃え、アイテムごとの配置に対応し、きれいなCSSをコピーできます。

他のカテゴリを見る