縮小化は、Web 上で最も低コストでパフォーマンスを向上させる方法の 1 つです。マシンが無視する文字 (コメント、インデント、改行、繰り返しのスペース) を取り除き、ファイルの動作を変更することなく、より少ないバイト数でファイルのダウンロードと解析を行います。 ToolsMinify には、JSON、HTML、CSS、JavaScript という最も多く出荷される 4 つの形式ごとに、専用の無料のミニファイアーが用意されています。どれも完全にブラウザ内で実行されるため、何もアップロードされず、コードは非公開のままになります。このガイドでは、各ミニファイアーが何を削除するか、どれくらいの節約が期待できるか、いつどれに手を伸ばすべきか、そしてそれらを結び付けるワークフローについて説明します。
クイック回答
API ペイロードと構成には JSON Minifier、ページとテンプレートには HTML Minifier、スタイルシートには CSS Minifier、スクリプトには JavaScript Minifier を使用します。それぞれの機能はマシンに必要のない空白とコメントを取り除き、出力の動作を維持し、保存された正確なバイト数を表示します。すべてクライアント側で無料です。
ミニ化とは何ですか?
縮小化は、同じように動作する最小の形式にファイルを書き換えます。削除される文字 (タグ間のスペース、インデント、空白行、コメント) は、純粋に人間がコードを読み取れるようにするために存在します。ブラウザ、パーサー、ランタイムにはそれらは必要ありません。コードの意味は変更されていないため、縮小されたファイルは元のファイルとまったく同じ結果を生成します。つまり、ページは同じようにレンダリングされ、スタイルは同じに適用され、スクリプトは同じように実行され、JSON は同じオブジェクトに解析されます。唯一失われるのは可読性です。そのため、常にフォーマット済みのコピーをソース管理に保存し、運用環境に出すときにコピーを縮小します。
ToolsMinify の 4 つの無料ミニファイアー
安全なルールが異なるため、形式ごとに独自のミニファイアーが存在します。HTML から削除できるものは CSS を破壊し、CSS から削除できるものは JavaScript を破壊します。これが完全なセットです - いずれかのツールをクリックして開きます。
- JSON ミニファイアーとフォーマッタ - ペイロードを小さくするために JSON を 1 行に縮小するか、読み取り用に 2 スペースのインデントを使用して JSON を美しくします。進行中に検証します。
- HTML ミニファイアー - スクリプト、スタイル、プレ、テキストエリアの内容と IE の条件付きコメントを保持しながら、コメントを削除し、タグ間の空白を折りたたむことができます。
- CSSミニファイアー - 文字列、url() パス、calc() 間隔、メディア クエリを保護しながら、コメントを削除し、中括弧、コロン、セミコロンの周囲の空白を減らします。
- JavaScript ミニファイアー - 文字列、テンプレート リテラル、正規表現を保持し、改行を維持しながらコメントと余分な空白を削除することで、自動セミコロン挿入が引き続き動作します。
各ミニファイアーをいつ使用するか
JSON ミニファイアーとフォーマッタ
JSON が移動中または保存中のデータである場合は常に、JSON Minifier & Formatter を使用します。API リクエストと応答の本文、データベース列またはキャッシュに保存する構成、メッセージ キューのペイロード、ログ行などです。縮小すると、すべてのコロンとカンマとすべてのインデントの後のスペースが削除され、同じキーを繰り返すレコードの配列に高速に加算されます。同じツールは別の方向でも美しくするため、圧縮された 1 行の応答をネットワーク タブから貼り付け、それを整形して印刷して、ネストされたフィールドを検査することができます。書き換える前に解析するため、欠落しているカンマまたは末尾括弧にフラグを立てる迅速な検証機能としても機能します。
HTML ミニファイアー
HTML Minifier は、静的ページ、ランディング ページ、または電子メール テンプレートを公開する前の最終ステップとして使用し、CMS または WYSIWYG エディターからエクスポートされた肥大化したマークアップをクリーンアップします。 HTML が小さいほど、最初のバイトと解析が速くなり、低速のモバイル接続でも最大のコンテンツフル ペイントが役立ちます。これは意図的に保守的です。script、style、pre、textarea の内容はそのままにして、条件付きコメントを保持するため、ページが壊れることはありません。これは、インライン JavaScript や CSS を縮小せず、それらのブロックを JS および CSS ツールに渡すことも意味します。
CSSミニファイアー
CSS はレンダリングをブロックします。ブラウザはスタイルシートを取得するまでペイントしません。そのため、CSS を縮小すると、First Contentful Paint に直接役立ちます。 CSS Minifier は、手書きのスタイルシート、コンポーネント スタイル、テーマ ファイル、またはプリプロセッサまたはページ ビルダーからエクスポートされた CSS で使用します。コメントを削除し、空白を折りたたんで、意味を伝えるもの、つまり引用符で囲まれた文字列、url() 値、calc() が + と - の周囲に必要とするスペース、およびメディア クエリ内の括弧の前のスペースを慎重に保持します。最大の効果を得るには、まず PurgeCSS などのツールを使用して未使用のルールを削除し、次に残ったルールを縮小します。
JavaScript ミニファイアー
JavaScript Minifier は、基本的で安全な空白ミニファイアです。文字列リテラル、テンプレート リテラル、正規表現を保護しながら、コメントとインデントを取り除き、ステートメント間の改行を保持するため、自動セミコロン挿入は影響を受けません。そのため、小さなインライン スクリプトをページや電子メールにドロップする前にトリミングしたり、スニペットや要点をクリーンアップしたりするのに最適です。変数の名前変更やデッドコードの削除は行わないため、運用アプリケーションの場合は、Terser、esbuild、SWC などのパーサーベースのツールをビルドで使用してください。これらのツールを使用すると、空白文字の削除だけを行うよりも大幅に節約できます。
それぞれをいつ使用するか - 一目でわかる
- データの送信または保存 (API、構成、ログ、キャッシュ): JSON Minifier および Formatter。
- ページ、ランディング ページ、または電子メール テンプレートの公開: HTML Minifier。
- 導入前のスタイルシートとテーマの最適化: CSS Minifier。
- 小さなインライン スクリプト、スニペット、または要点のトリミング: JavaScript Minifier。
- 実際の節約 (変数の名前変更、ツリーシェイキング) を備えた運用アプリ バンドル: esbuild、Terser、または SWC などのビルド ツール - 空白縮小ツールではありません。
どれくらい節約できますか？
空白のみの縮小では、インデントやコメントの量に応じて、通常、ファイルが生のサイズの 10 ～ 50% 縮小されます。深くネストされた JSON と十分にフォーマットされた HTML がハイエンドに位置します。ローエンドではすでに圧縮されたファイル。 1 つの点に留意してください。ほとんどのサーバーは既に gzip または Brotli を使用して応答を圧縮しており、これらのアルゴリズムは繰り返される空白を圧縮するのに非常に優れているため、ネットワーク経由での縮小のみの場合の差は、生のバイト数が示すよりも小さくなります。縮小は依然として重要です。メモリ、キャッシュ、ログ、ストレージに存在する非圧縮サイズが縮小され、コンプレッサーの作業が軽減されます。正しい方法は、両方を使用することです。最初に縮小し、次にサーバーを圧縮します。
Web 開発者向けの縮小ワークフロー
縮小はパイプラインの最後に機械的に行うステップであるべきであり、手動でファイルを編集して行うものではありません。信頼できるワークフローは次のようになります。
- 読み取り可能なコメント付きソースを作成し、バージョン管理下に保管します。縮小されたファイルを直接編集しないでください。
- 対応するツールを使用して各ファイル タイプを縮小します。 JS ミニファイアーはマークアップに触れてはならず、HTML ミニファイアーはスタイルを書き換えてはなりません。
- ビルドまたはデプロイのステップとして縮小化を実行すると、ソースが保守可能になり、出力のみが圧縮されます。
- 実際のアプリケーション JavaScript の場合は、esbuild、Terser、SWC などのバンドラーを minify にします。小さなインライン スニペットには、ここでブラウザーの JS Minifier を使用します。
- サーバー上で gzip または Brotli を使用してスタックを縮小します。縮小すると非圧縮サイズが縮小され、残りはコンプレッサーが処理します。
- 各ツールでバイト節約された読み取り値をチェックして、ファイルをビルドに接続する前に、ファイルを縮小する価値があることを確認します。
経験則
人間向けにフォーマットし、マシン向けに minify します。読み取り可能なコメント付きバージョンをソース管理とエディターに保持し、本番環境、ストレージ、ログに出力する途中でのみ縮小します。
ミニファイアーはコードの動作を変更しますか?
いいえ。安全なミニファイアは意味のない文字のみを削除するため、出力は入力とまったく同じように動作します。ページは同じようにレンダリングされ、スタイルは同じようにカスケードされ、スクリプトは同じように実行され、JSON は同じオブジェクトに解析されます。 ToolsMinify ツールは、問題を引き起こす可能性のあるエッジ ケースに対して意図的に慎重になっています。HTML ツールは、script、style、pre、および textarea を保持します。 CSS ツールは文字列、url()、calc() 間隔、およびメディア クエリを保持します。また、JS ツールは文字列、テンプレート リテラル、正規表現を保持し、ASI の改行を保持します。変数の名前変更やデッドコードの削除など、積極的な JavaScript の最適化が必要な場合、それは空白ミニファイアーではなく、パーサーベースのビルド ツールの仕事です。
よくある質問
ファイルにはどのミニファイヤを使用すればよいですか?
ツールを言語に合わせます: .json データと API ペイロードの場合は JSON、.html ページとテンプレートの場合は HTML、.css スタイルシートの場合は CSS、.js スクリプトの場合は JavaScript。ある形式のミニファイアーを別の形式で実行しないでください。安全なルールは異なるため、それらを相互に使用するとファイルが破損する可能性があります。
これらのミニファイアーは無料で非公開ですか?
はい。 ToolsMinify のすべてのミニファイアーは無料で、サインアップも必要なく、完全にブラウザーで実行できます。 JSON、HTML、CSS、JavaScript がサーバーにアップロードされることはありません。そのため、ツールはプライベート テンプレート、未リリースの機能、機密設定に対して安全です。
縮小する場合でも gzip または Brotli が必要ですか?
はい、両方を使用してください。縮小化は、有効なままテキストからオプションの文字を削除します。次に、gzip と Brotli は転送用にバイトを圧縮します。これらはさまざまなレイヤーで動作し、適切にスタックされます。まず縮小して非圧縮サイズを縮小し、次にサーバーが結果をネットワーク上で圧縮します。
1 つのツールで HTML、CSS、JavaScript をまとめて縮小できますか?
各ツールは個別に使用してください。 HTML Minifier は、安全性を保つためにインライン スクリプトとスタイル ブロックを意図的に変更しないままにします。つまり、これらを JavaScript および CSS ツールで縮小する必要があります。形式を分離しておくことで、何も壊れないことが保証されます。
JSON の縮小とフォーマットの違いは何ですか?
彼らは正反対です。縮小すると、空白が削除されて JSON が 1 行に折りたたまれます。これはペイロードとストレージに必要なものです。書式設定 (美化) すると、デバッグ中に読みやすいように 2 スペースの間隔で再インデントされます。 JSON Minifier と Formatter は両方を実行し、それらを切り替えてもデータが変更されることはありません。
実稼働環境の JavaScript には空白ミニファイアーで十分ですか?
小さなインライン スニペットの場合は可能です。実際のアプリケーション バンドルの場合は、Terser、esbuild、SWC などのパーサー ベースのツールを使用します。これらのツールは、変数の名前を変更し、デッド コードを削除して、空白だけを削除するよりもはるかに大きな節約を実現します。ブラウザーの JavaScript Minifier は、ビルド時の完全な最適化ではなく、迅速かつ安全なクリーンアップを目的として構築されています。
無料のミニファイアーを開く
以下のすべてのツールはブラウザ内で完全に実行されます。無料、サインアップ不要、何もアップロードされません。
縮小を開始 - 無料
JSON Minifier & Formatter を開いて JSON を縮小または整形し、スタックの残りの部分に対して無料の HTML、CSS、JavaScript ミニファイアーと組み合わせます。すべてがブラウザ内で実行されます。サインアップやアップロードは必要ありません。