JavaScript・CSS圧縮(Minify)ツール

JavaScriptやCSSのコードから不要な空白・改行・コメントを取り除き、変数名の短縮やルールの統合まで行ってファイルサイズを大幅に削減できる無料のMinifyツールです。処理はすべてブラウザ内で完結し、コードがサーバーに送信されることはありません。削減率の表示、コピー・ダウンロードにも対応。

入力(圧縮前のコード)
出力(圧縮後のコード)

このツールについて

JavaScriptやCSSのソースコードから、不要な空白・改行・コメントを取り除いてファイルサイズを削減(Minify)できる無料ツールです。単純な空白除去だけでなく、JavaScriptではローカル変数名の短縮や不要コードの削除、CSSでは同じ内容を持つルールの統合やカラーコードの短縮(#ffffff#fffなど)といった高度な最適化まで行うため、高い圧縮率が得られます。

圧縮処理はすべてお使いのブラウザ内だけで完結し、入力したコードがサーバーに送信されることはありません。業務のソースコードでも安心してご利用いただけます。

使い方

  1. 「JavaScript」「CSS」のタブから圧縮したい言語を選択します。
  2. 入力欄にコードを貼り付けます。「ファイルを開く」ボタンやドラッグ&ドロップでファイルから読み込むこともできます。
  3. 「圧縮する」ボタンを押すと(またはCtrl+Enter)、圧縮結果と削減率が表示されます。
  4. 「コピー」または「ダウンロード」で圧縮後のコードを取得できます。

各オプション右の「?」にマウスを乗せる(スマートフォンではタップする)と、その項目の説明が表示されます。オプションのオン・オフや選択中のタブはブラウザに記憶され、次回アクセス時に自動で復元されます(記憶されるのは設定のみで、入力したコードは保存されません)。

圧縮の仕組み

  • JavaScript:webpack等でも標準採用されている圧縮エンジン「Terser」を使用。空白・コメントの除去に加え、ローカル変数名の短縮(mangle)、到達しないコードや無意味な式の削除、定数の畳み込みなどを行います。
  • CSS:構造最適化に強い圧縮エンジン「csso」を使用。空白・コメントの除去に加え、同一宣言を持つルールの統合、重複プロパティの削除、色・数値表記の短縮などを行います。
  • 文字列リテラルや正規表現の中身は壊さずに安全に処理されます。

ご利用上の注意

  • 圧縮後のコードは元に戻せません。圧縮前のコードは必ず別途保管してください。
  • 圧縮後は念のため動作確認を行ってください。特に「トップレベルの変数・関数名も短縮する」オプションは、そのファイルの変数や関数を他のスクリプトから参照している場合には使用できません。
  • /*! 〜 */@license@preserve 付きのコメントは、ライセンス表記保護のため既定では残す設定になっています(オプションで除去可能)。
  • 構文エラーのあるJavaScriptは圧縮できません。エラー位置が表示されるので修正してから再実行してください。